<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>机房管理系统 - 实时数据展示</title>
  
  <!-- 离线地图 -->
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=c6faf44588a2b4f0a60798b74eda33d4&plugin=AMap.Scale,AMap.ToolBar,AMap.ControlBar,AMap.TileLayer,AMap.TileLayer.Satellite,AMap.TileLayer.RoadNet"></script>
  
  <!-- Vue 3 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  
  <!-- ElementUI Plus -->
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
  <script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
  
  <!-- Axios -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  
  <!-- 图标 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@element-plus/icons-vue/dist/index.css">
  
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
    }
    
    body {
      font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif;
      background-color: #f5f7fa;
    }

    /* iconfont 字体样式 */
    @font-face {
      font-family: "iconfont";
      src: url('../iconfont.ttf?t=1758694393293') format('truetype');
    }

    .iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .icon-zuobiao:before {
      content: "\e618";
    }

    .icon-zuobiao1:before {
      content: "\e644";
    }
    
    #app {
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    .header {
      background: #fff;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      padding: 0 20px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .logo {
      display: flex;
      align-items: center;
      font-size: 20px;
      font-weight: bold;
      color: #409eff;
    }
    
    .search-container {
      flex: 1;
      max-width: 400px;
      margin: 0 20px;
    }
    
    .main-container {
      flex: 1;
      display: flex;
      overflow: hidden;
    }
    
    .sidebar {
      width: 300px;
      background: #fff;
      box-shadow: 2px 0 4px rgba(0,0,0,0.1);
      overflow-y: auto;
      padding: 20px;
    }
    
    .map-container {
      flex: 1;
      position: relative;
      background: #f0f0f0;
      border-left: 1px solid #ddd;
      min-height: calc(100vh - 60px);
      width: calc(100% - 300px); /* 减去左侧边栏宽度 */
    }
    
    #map {
      width: 100%;
      height: 100%;
      min-height: calc(100vh - 60px);
      background: #fff;
    }
    
    .map-loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(255, 255, 255, 0.9);
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.1);
      z-index: 100;
      text-align: center;
    }
    
    .map-toolbar {
      position: absolute;
      top: 20px;
      left: 20px;
      background: #fff;
      padding: 10px;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.1);
      z-index: 100;
      max-width: calc(100vw - 40px);
      overflow-x: auto;
    }
    
    .map-toolbar .el-button-group {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }
    
    .map-toolbar .el-button {
      white-space: nowrap;
      min-width: auto;
      padding: 8px 12px;
    }
    
    /* 清除按钮特殊样式 */
    .map-toolbar .el-button--warning {
      background: #f56c6c;
      border-color: #f56c6c;
      color: #fff;
    }
    
    .map-toolbar .el-button--warning:hover {
      background: #f78989;
      border-color: #f78989;
    }
    
    .map-toolbar .el-button--warning:active {
      background: #dd6161;
      border-color: #dd6161;
    }
    
    .business-tree {
      margin-top: 20px;
    }
    
    .tree-node {
      padding: 8px 0;
      cursor: pointer;
      border-radius: 4px;
      transition: all 0.3s;
    }
    
    .tree-node:hover {
      background-color: #f5f7fa;
    }
    
    .tree-node.highlight {
      background-color: #e6f7ff;
      border-left: 3px solid #409eff;
    }
    
    .node-info-panel {
      position: fixed;
      top: 80px;
      right: 20px;
      width: 350px;
      max-height: calc(100vh - 100px);
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.1);
      padding: 20px;
      z-index: 1000;
      overflow-y: auto;
    }
    
    .status-online { color: #67c23a; }
    .status-warning { color: #e6a23c; }
    .status-offline { color: #f56c6c; }
    
    /* 基础标记样式 - 简洁样式，高亮通过highlighted-marker类实现 */
    .map-marker {
      position: relative;
      width: 30px;
      height: 30px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
    }
    
    /* 确保普通标记不会覆盖高亮标记 */
    .map-marker:not(.highlighted-marker) {
      z-index: 100 !important;
    }
    
    .map-marker .marker-dot {
      width: 24px;
      height: 24px;
      background: transparent;
      border: none;
      position: relative;
      z-index: 101;
      box-shadow: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* 确保普通标记内部元素不会覆盖高亮标记 */
    .map-marker:not(.highlighted-marker) .marker-dot {
      z-index: 101 !important;
    }
    
    /* 普通标记的坐标图标 */
    .map-marker:not(.highlighted-marker) .marker-dot .iconfont {
      z-index: 101 !important;
      position: relative !important;
    }
    
    /* 普通状态的蓝色坐标图标 */
    .map-marker .marker-dot .iconfont {
      font-size: 24px;
      color: #409eff;
    }
    
    .map-marker .marker-label {
      position: absolute;
      top: -35px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0,0,0,0.8);
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 12px;
      white-space: nowrap;
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: 3;
      box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    }

    
    .map-marker:hover .marker-label {
      opacity: 1;
    }
    
    /* 悬停效果 - 只在非高亮状态下生效 */
    .map-marker.marker-hover {
      transform: scale(1.2);
    }
    
    .map-marker.marker-hover .marker-dot {
      animation-duration: 0.5s;
    }
    
    .map-marker.marker-hover .marker-pulse {
      animation-duration: 0.8s;
    }
    
    .map-marker.marker-hover .marker-glow {
      animation-duration: 1s;
    }
    
    /* 搜索高亮效果 */
    .map-marker.search-highlight {
      filter: drop-shadow(0 0 10px #409eff);
      transform: scale(1.2);
    }
    
    .legend {
      position: absolute;
      bottom: 20px;
      left: 20px;
      background: #fff;
      padding: 15px;
      border-radius: 8px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.1);
      z-index: 100;
    }
    
    .legend-item {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
    }
    
    .legend-color {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-right: 8px;
    }
    
    /* 高德地图样式优化 */
    .amap-container {
      font-family: 'Microsoft YaHei', sans-serif;
    }
    
    .amap-info-content {
      border-radius: 8px !important;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    }
    
    /* 业务线段交互样式 */
    .amap-polyline {
      transition: all 0.3s ease;
    }
    
    .amap-polyline:hover {
      cursor: pointer;
    }
    
    /* 高亮线段样式 */
    .highlighted-segment {
      stroke-dasharray: 10, 5 !important;
      animation: dashMove 1s linear infinite;
    }
    
    @keyframes dashMove {
      0% {
        stroke-dashoffset: 0;
      }
      100% {
        stroke-dashoffset: 15;
      }
    }
    
    /* 机房定位高亮动画 */
    @keyframes markerHighlight {
      0% {
        transform: scale(1.8);
        opacity: 1;
      }
      50% {
        transform: scale(2.0);
        opacity: 0.8;
      }
      100% {
        transform: scale(1.8);
        opacity: 1;
      }
    }
    
    /* 信息面板样式 */
    .info-section {
      margin-bottom: 20px;
    }
    
    .business-card {
      background: #beeba8;
      border: 1px solid #e9ecef;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 10px;
    }
    
    .clickable-business-card {
      position: relative;
      overflow: hidden;
    }
    
    .clickable-business-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.5s;
    }
    
    .clickable-business-card:hover::before {
      left: 100%;
    }
    
    .clickable-business-card:hover {
      background: #a8d8a0;
      border-color: #409eff;
    }
    
    .business-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    
    .business-name {
      font-weight: bold;
      font-size: 16px;
      color: #333;
    }
    
    .business-info {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    
    .info-item {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
    }
    
    .label {
      color: #666;
      font-weight: 500;
    }
    
    .value {
      color: #333;
    }
    
    .device-list {
      max-height: 300px;
      overflow-y: auto;
    }
    
    .device-card {
      background: #fff;
      border: 1px solid #e9ecef;
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .clickable-device-card {
      position: relative;
      overflow: hidden;
    }
    
    .clickable-device-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.5s;
    }
    
    .clickable-device-card:hover::before {
      left: 100%;
    }
    
    .clickable-device-card:hover {
      background: #f0f9ff;
      border-color: #409eff;
    }
    
    .device-card:hover {
      border-color: #409eff;
      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
    }
    
    .device-card.selected {
      border-color: #409eff;
      background: #f0f9ff;
      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
    }
    
    .board-list {
      max-height: 300px;
      overflow-y: auto;
    }
    
    .board-card {
      background: #fff;
      border: 1px solid #e9ecef;
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    
    .board-card:hover {
      border-color: #e6a23c;
      box-shadow: 0 2px 8px rgba(230, 162, 60, 0.2);
    }
    
    .board-card.selected {
      border-color: #e6a23c;
      background: #fdf6ec;
      box-shadow: 0 2px 8px rgba(230, 162, 60, 0.3);
    }
    
    .board-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }
    
    .board-name {
      font-weight: bold;
      font-size: 14px;
      color: #333;
    }
    
    .board-info {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px;
    }
    
    .device-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }
    
    .device-name {
      font-weight: bold;
      font-size: 14px;
      color: #333;
    }
    
    .device-info {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px;
    }
    
    .info-row {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
    }
    
    .port-list {
      max-height: 400px;
      overflow-y: auto;
    }
    
    .port-card {
      background: #fff;
      border: 1px solid #e9ecef;
      border-radius: 6px;
      padding: 10px;
      margin-bottom: 6px;
      transition: all 0.3s ease;
    }
    
    .port-card.port-normal {
      border-left: 4px solid #67c23a;
    }
    
    .port-card.port-warning {
      border-left: 4px solid #e6a23c;
    }
    
    .port-card.port-error {
      border-left: 4px solid #f56c6c;
    }
    
    .port-card.port-unused {
      border-left: 4px solid #909399;
    }
    
    .port-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 6px;
    }
    
    .port-name {
      font-weight: bold;
      font-size: 13px;
      color: #333;
    }
    
    .port-info {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px;
    }
    
    .connection-status-connected {
      color: #67c23a;
      font-weight: bold;
    }
    
    .connection-status-disconnected {
      color: #f56c6c;
      font-weight: bold;
    }
    
    .connection-status-unknown {
      color: #909399;
      font-weight: bold;
    }
    
    /* 端口详情卡片样式 */
    .port-details-card {
      background: #fff;
      border: 1px solid #e9ecef;
      border-radius: 8px;
      margin-top: 20px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      max-height: 500px;
      display: flex;
      flex-direction: column;
    }
    
    .port-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px;
      border-bottom: 1px solid #e9ecef;
      background: #f8f9fa;
      border-radius: 8px 8px 0 0;
    }
    
    .port-card-header h4 {
      margin: 0;
      color: #333;
      font-size: 16px;
      display: flex;
      align-items: center;
    }
    
    .port-details-card .port-list {
      max-height: 400px;
      overflow-y: auto;
      padding: 10px;
    }
    
    .port-details-card .port-card {
      margin-bottom: 8px;
      padding: 12px;
    }
    
    .port-details-card .port-card:last-child {
      margin-bottom: 0;
    }
    
    /* 独立卡片容器样式 */
    .card-container {
      position: fixed;
      top: 80px;
      right: 380px; /* 在机房卡片左侧，留出10px间距 */
      width: 350px;
      max-height: calc(100vh - 100px);
      z-index: 1000;
      display: flex;
      flex-direction: column;
      gap: 15px;
    }
    
    .independent-card {
      background: #fff;
      border: 1px solid #e9ecef;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      overflow: hidden;
      max-height: 500px;
      display: flex;
      flex-direction: column;
    }
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
      background: #f8f9fa;
      border-bottom: 1px solid #e9ecef;
      border-radius: 8px 8px 0 0;
    }
    
    .card-header h4 {
      margin: 0;
      color: #333;
      font-size: 16px;
      font-weight: 600;
      display: flex;
      align-items: center;
    }
    
    .card-content {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    
    .card-content .board-list,
    .card-content .port-list {
      flex: 1;
      overflow-y: auto;
      padding: 15px;
    }
    
    /* 单板卡片容器特殊样式 */
    .board-card-container .card-header {
      background: linear-gradient(135deg, #fdf6ec 0%, #f5dab1 100%);
      border-bottom-color: #e6a23c;
    }
    
    .board-card-container .card-header h4 {
      color: #b45309;
    }
    
    /* 设备卡片容器特殊样式 */
    .device-card-container .card-header {
      background: linear-gradient(135deg, #f0f9ff 0%, #b3d8ff 100%);
      border-bottom-color: #409eff;
    }
    
    .device-card-container .card-header h4 {
      color: #0369a1;
    }
    
    /* 端口卡片容器特殊样式 */
    .port-card-container .card-header {
      background: linear-gradient(135deg, #f0f9ff 0%, #b3d8ff 100%);
      border-bottom-color: #67c23a;
    }
    
    .port-card-container .card-header h4 {
      color: #0369a1;
    }
    
    /* 响应式设计 */
    @media (max-width: 1400px) {
      .card-container {
        right: 370px;
        width: 340px;
      }
      
      .node-info-panel {
        width: 340px;
      }
    }
    
    @media (max-width: 1200px) {
      .card-container {
        right: 360px;
        width: 330px;
      }
      
      .node-info-panel {
        width: 330px;
      }
    }
    
    @media (max-width: 1000px) {
      .card-container {
        right: 350px;
        width: 320px;
      }
      
      .node-info-panel {
        width: 320px;
        }
      }
      
      /* 光缆信息卡片样式 */
      .fiber-info-card {
        position: absolute;
        top: 80px;
        left: 20px;
        width: 380px;
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        z-index: 1000;
        border: 1px solid #ddd;
      }
      
      .fiber-info-card .card-header {
        background: #409eff;
        color: white;
        padding: 12px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ddd;
      }
      
      .fiber-info-card .card-header h3 {
        margin: 0;
        font-size: 16px;
        font-weight: 500;
      }
      
      .fiber-info-card .card-content {
        padding: 16px;
        max-height: 600px;
        overflow-y: auto;
      }
      
      .fiber-info-card .info-section {
        margin-bottom: 16px;
      }
      
      .fiber-info-card .info-section:last-child {
        margin-bottom: 0;
      }
      
      .fiber-info-card .info-section h4 {
        color: #333;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 8px;
        padding-bottom: 4px;
        border-bottom: 1px solid #eee;
      }
      
      .fiber-info-card .info-item {
        display: flex;
        margin-bottom: 6px;
        font-size: 13px;
      }
      
      .fiber-info-card .info-item:last-child {
        margin-bottom: 0;
      }
      
      .fiber-info-card .label {
        color: #666;
        font-weight: 400;
        min-width: 80px;
        flex-shrink: 0;
        margin-right: 8px;
      }
      
      .fiber-info-card .value {
        color: #333;
        flex: 1;
        word-break: break-all;
      }
   
      
      /* 高亮标记内部元素样式 - 增强版 */
      .map-marker.highlighted-marker .marker-dot {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        transform: none !important;
        width: 24px !important;
        height: 24px !important;
        z-index: 201 !important;
        position: relative !important;
      }
      
      /* 高亮状态的红色坐标图标 */
      .map-marker.highlighted-marker .marker-dot .iconfont {
        font-size: 24px !important;
        color: #ff4d4f !important;
        z-index: 201 !important;
        position: relative !important;
      }
      
      /* 确保整个高亮标记容器在最顶层 */
      .map-marker.highlighted-marker {
        z-index: 201 !important;
        position: relative !important;
      }
      
      /* 简化高亮样式 - 确保红色坐标图标显示 */
      .highlighted-marker .iconfont {
        color: #ff4d4f !important;
        font-size: 24px !important;
        z-index: 201 !important;
        position: relative !important;
      }
      
      /* 高亮标记的坐标图标 - 确保层级最高 */
      .map-marker.highlighted-marker .marker-dot .iconfont {
        color: #ff4d4f !important;
        font-size: 24px !important;
        z-index: 201 !important;
        position: relative !important;
      }
      
      .map-marker.highlighted-marker .marker-label {
        color: #ffffff !important;
        background: rgba(255, 0, 0, 0.9) !important;
        font-weight: bold !important;
        font-size: 12px !important;
        text-shadow: none !important;
        padding: 2px 6px !important;
        border-radius: 4px !important;
        border: 1px solid #ffffff !important;
      }
      
      /* 高亮标记内部文字样式 */
      .map-marker.highlighted-marker .marker-dot::after {
        color: #ffffff !important;
        font-weight: bold !important;
      }
      
      
      .highlighted-fiber {
        stroke: #ff0000 !important;
        stroke-width: 8px !important;
        stroke-opacity: 1 !important;
        filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.8)) !important;
        transition: all 0.3s ease !important;
      }
      
      /* 菜单选中样式 */
      .menu-selected {
        background-color: #e6f7ff !important;
        border-left: 3px solid #1890ff !important;
        font-weight: 600 !important;
        border-radius: 4px !important;
      }
      
      .menu-selected .el-icon {
        color: #1890ff !important;
      }
      
      .menu-selected span {
        color: #1890ff !important;
      }
    </style>
</head>
<body>
  <div id="app">
    <div class="header">
      <div class="logo">
        <el-icon style="margin-right: 10px; font-size: 24px;"><Location /></el-icon>
        综合资源展示
      </div>
      <div class="search-container">
        <el-input
          v-model="searchText"
          placeholder="请输入业务线名称进行搜索"
          clearable
          @input="handleSearch"
          size="large">
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
      <div>
        <el-button type="primary" @click="refreshData">
          <el-icon><Refresh /></el-icon>
          刷新数据
        </el-button>
      </div>
    </div>
    
    <div class="main-container">
      <div class="sidebar">
        <h3>项目展示</h3>
        <div class="business-tree">
          <el-tree
            :data="orderMenuData"
            :props="orderTreeProps"
            :highlight-current="true"
            :expand-on-click-node="false"
            @node-click="handleOrderNodeClick"
            ref="orderTreeRef">
            <template #default="{ node, data }">
              <div class="tree-node" :class="{ 
                highlight: data.highlight,
                'menu-selected': data.isSelected 
              }">
                <el-icon style="margin-right: 5px;">
                  <component :is="getOrderNodeIcon(data.type)" />
                </el-icon>
                <span>{{ node.label }}</span>
                <el-tag v-if="data.type === 'customer'" size="small" style="margin-left: 5px;">
                  {{ data.businessCount }}个业务
                </el-tag>
                <el-tag v-else-if="data.type === 'business'" size="small" style="margin-left: 5px;" type="info">
                  {{ data.fiberCount }}条光缆 {{ data.equipmentCount }}台设备
                </el-tag>
                <el-tag v-else-if="data.type === 'fiber_group'" size="small" style="margin-left: 5px;" type="success">
                  {{ data.children.length }}条光缆
                </el-tag>
                <el-tag v-else-if="data.type === 'equipment_group'" size="small" style="margin-left: 5px;" type="warning">
                  {{ data.children.length }}台设备
                </el-tag>
                <el-tag v-else-if="data.type === 'fiber'" size="small" style="margin-left: 5px;" type="success">
                  光缆
                </el-tag>
                <el-tag v-else-if="data.type === 'equipment'" size="small" style="margin-left: 5px;" type="warning">
                  设备
                </el-tag>
              </div>
            </template>
          </el-tree>
        </div>
      </div>
      
      <div class="map-container">
        <div id="map">
        <!-- 地图加载提示 -->
        <div v-if="!mapLoaded" class="map-loading">
          <el-icon style="font-size: 24px; color: #409eff;" class="is-loading"><Loading /></el-icon>
          <div style="margin-top: 10px; color: #666;">地图加载中...</div>
        </div>
        
        <!-- 数据加载提示 -->
        <div v-if="loading" class="map-loading">
          <el-icon style="font-size: 24px; color: #409eff;" class="is-loading"><Loading /></el-icon>
          <div style="margin-top: 10px; color: #666;">正在加载机房数据...</div>
        </div>
        </div>
        
        <!-- 地图工具栏 -->
        <div class="map-toolbar" v-if="mapLoaded">
          <el-button-group>
            <el-button size="small" @click="setMapCenter" title="重置地图中心">
              <el-icon><Location /></el-icon>
              重置中心
            </el-button>
            <el-button size="small" @click="toggleMapLayer" title="切换地图图层">
              <el-icon><Picture /></el-icon>
              切换图层
            </el-button>
            <el-button size="small" @click="toggleFiberLines" :type="showFiberLines ? 'primary' : ''" title="切换光缆线显示">
              <el-icon><Connection /></el-icon>
              光缆线显示
            </el-button>
            <el-button size="small" @click="closeAllCards(false)" type="warning" title="清除所有信息卡片">
              <el-icon><Delete /></el-icon>
              清除卡片
            </el-button>
            </el-button-group>
          </div>
          
          <!-- 光缆信息卡片 -->
          <div v-if="selectedFiber" class="fiber-info-card">
            <div class="card-header">
              <h3>光缆信息</h3>
              <el-button size="small" type="text" @click="closeFiberInfo">
                <el-icon><font style="color: white;">X</font><Close /></el-icon>
              </el-button>
            </div>
            <div class="card-content">
              <div class="info-section">
                <h4>光缆基本信息</h4>
                <div class="info-item">
                  <span class="label">光缆名称:</span>
                  <span class="value">{{ selectedFiber.fiber.fiberName || '未命名' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">光缆编码:</span>
                  <span class="value">{{ selectedFiber.fiber.fiberCode || '无编码' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">光缆型号:</span>
                  <span class="value">{{ selectedFiber.fiber.fiberModel || '未知型号' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">总芯数:</span>
                  <span class="value">{{ selectedFiber.fiber.totalCores || '未知' }} 芯</span>
                </div>
                <div class="info-item">
                  <span class="label">长度:</span>
                  <span class="value">{{ selectedFiber.fiber.length || '未知' }} 米</span>
                </div>
                <div class="info-item">
                  <span class="label">敷设方式:</span>
                  <span class="value">{{ selectedFiber.fiber.layingMethod || '未知' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">产权归属:</span>
                  <span class="value">{{ selectedFiber.fiber.ownershipUnit || '未知' }}</span>
                </div>
              </div>
              
              <div class="info-section">
                <h4>起点机房</h4>
                <div class="info-item">
                  <span class="label">机房名称:</span>
                  <span class="value">{{ selectedFiber.startRoom.name }}</span>
                </div>
                <div class="info-item">
                  <span class="label">机房编码:</span>
                  <span class="value">{{ selectedFiber.fiber.startMachineRoomCode || '无编码' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">城市:</span>
                  <span class="value">{{ selectedFiber.startRoom.city || '未知' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">地址:</span>
                  <span class="value">{{ selectedFiber.startRoom.address || '未知' }}</span>
                </div>
              </div>
              
              <div class="info-section">
                <h4>终点机房</h4>
                <div class="info-item">
                  <span class="label">机房名称:</span>
                  <span class="value">{{ selectedFiber.endRoom.name }}</span>
                </div>
                <div class="info-item">
                  <span class="label">机房编码:</span>
                  <span class="value">{{ selectedFiber.fiber.endMachineRoomCode || '无编码' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">城市:</span>
                  <span class="value">{{ selectedFiber.endRoom.city || '未知' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">地址:</span>
                  <span class="value">{{ selectedFiber.endRoom.address || '未知' }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 机房信息卡片 -->
        <div v-if="selectedRoom" class="node-info-panel">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
            <h3>{{ selectedRoom.name }}</h3>
            <el-button type="text" @click="closeRoomDetails">
              <el-icon>X<Close /></el-icon>
            </el-button>
          </div>
          
          <!-- 机房基本信息 -->
          <el-descriptions :column="1" border style="margin-bottom: 20px;">
            <el-descriptions-item label="类型">
              <el-tag type="success">机房</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="状态" v-if="selectedRoom.status">
              <span :class="getStatusClass(selectedRoom.status)">
                <el-icon><CircleCheck /></el-icon>
                {{ selectedRoom.status }}
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="城市" v-if="selectedRoom.city">
              {{ selectedRoom.city }}
            </el-descriptions-item>
            <el-descriptions-item label="地址" v-if="selectedRoom.address">
              {{ selectedRoom.address }}
            </el-descriptions-item>
            <el-descriptions-item label="设备数量" v-if="selectedRoom.deviceCount">
              {{ selectedRoom.deviceCount }} 台
            </el-descriptions-item>
            <el-descriptions-item label="最后更新" v-if="selectedRoom.updateTime">
              {{ selectedRoom.updateTime }}
            </el-descriptions-item>
          </el-descriptions>

          <!-- 业务信息 -->
          <div v-if="selectedBusinesses && selectedBusinesses.length > 0" class="info-section">
            <h4 style="margin-bottom: 10px; color: #333; border-bottom: 2px solid #409eff; padding-bottom: 5px;">
              <el-icon style="margin-right: 5px;"><Grid /></el-icon>
              关联订单业务 ({{ selectedBusinesses.length }}个)
            </h4>
            <div v-for="(business, index) in selectedBusinesses" :key="business.id || index" 
                 class="business-card clickable-business-card" 
                 style="margin-bottom: 10px; cursor: pointer; transition: all 0.3s ease;"
                 @click="openBusinessSystem(business)"
                 @mouseenter="handleBusinessCardHover($event, true)"
                 @mouseleave="handleBusinessCardHover($event, false)">
              <div class="business-header">
                <span class="business-name">{{ business.name }}</span>
                <el-tag :type="getStatusTagType(business.status)" size="small">
                  {{ business.status }}
                </el-tag>
              </div>
              <div class="business-info">
                <div class="info-item">
                  <span class="label">客户名称:</span>
                  <span class="value">{{ business.customerName || '未知客户' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">客户编码:</span>
                  <span class="value">{{ business.customerCode || '无编码' }}</span>
                </div>
                <div class="info-item">
                  <span class="label">业务ID:</span>
                  <span class="value">{{ business.id }}</span>
                </div>
                <div class="info-item">
                  <span class="label">最后更新:</span>
                  <span class="value">{{ business.updateTime }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 设备列表 -->
          <div v-if="roomDevices.length > 0" class="info-section">
            <h4 style="margin-bottom: 10px; color: #333; border-bottom: 2px solid #409eff; padding-bottom: 5px;">
              <el-icon style="margin-right: 5px;"><Monitor /></el-icon>
              设备列表 ({{ roomDevices.length }}台)
            </h4>
            <div class="device-list">
              <div 
                v-for="device in roomDevices" 
                :key="device.id"
                class="device-card clickable-device-card"
                :class="{ 'selected': selectedDevice && selectedDevice.id === device.id }"
                @click="openDeviceSystem(device)"
                @mouseenter="handleDeviceCardHover($event, true)"
                @mouseleave="handleDeviceCardHover($event, false)">
                <div class="device-header">
                  <span class="device-name">{{ device.name }}</span>
                  <el-tag :type="getStatusTagType(device.status)" size="small">
                    {{ device.status }}
                  </el-tag>
                </div>
                <div class="device-info">
                  <div class="info-row">
                    <span class="label">品牌:</span>
                    <span class="value">{{ device.brand }}</span>
                  </div>
                  <div class="info-row">
                    <span class="label">型号:</span>
                    <span class="value">{{ device.model }}</span>
                  </div>
                  <div class="info-row">
                    <span class="label">单板数:</span>
                    <span class="value">{{ device.boardCount }}块</span>
                  </div>
                  <div class="info-row">
                    <span class="label">端口数:</span>
                    <span class="value">{{ device.portCount }}个</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        
    </div>
    
    <!-- 独立卡片区域 -->
    <div class="card-container">
      <!-- 设备详情卡片 -->
      <div v-if="selectedDevice" class="independent-card device-card-container">
        <div class="card-header">
          <h4>
            <el-icon style="margin-right: 5px;"><Monitor /></el-icon>
            {{ selectedDevice.name }} - 设备详情
          </h4>
          <el-button type="text" @click="closeDeviceDetails" size="small">
            <el-icon>X<Close /></el-icon>
          </el-button>
        </div>
        <div class="card-content">
          <!-- 设备基本信息 -->
          <div style="padding: 15px; border-bottom: 1px solid #e9ecef;">
            <div class="info-row" style="margin-bottom: 8px;">
              <span class="label">设备名称:</span>
              <span class="value">{{ selectedDevice.name }}</span>
            </div>
            <div class="info-row" style="margin-bottom: 8px;">
              <span class="label">品牌型号:</span>
              <span class="value">{{ selectedDevice.brand }} {{ selectedDevice.model }}</span>
            </div>
            <div class="info-row" style="margin-bottom: 8px;">
              <span class="label">设备状态:</span>
              <el-tag :type="getStatusTagType(selectedDevice.status)" size="small">
                {{ selectedDevice.status }}
              </el-tag>
            </div>
            <div class="info-row" style="margin-bottom: 8px;">
              <span class="label">单板数量:</span>
              <span class="value">{{ selectedDevice.boardCount }}块</span>
            </div>
            <div class="info-row">
              <span class="label">端口数量:</span>
              <span class="value">{{ selectedDevice.portCount }}个</span>
            </div>
          </div>
          
          <!-- 单板列表 -->
          <div v-if="deviceBoards.length > 0" style="padding: 15px;">
            <h5 style="margin-bottom: 10px; color: #333; border-bottom: 1px solid #e9ecef; padding-bottom: 5px;">
              <el-icon style="margin-right: 5px;"><Coin /></el-icon>
              单板列表 ({{ deviceBoards.length }}块)
            </h5>
            <div class="board-list">
              <div 
                v-for="board in deviceBoards" 
                :key="board.id"
                class="board-card"
                :class="{ 'selected': selectedBoard && selectedBoard.id === board.id }"
                @click="selectBoard(board)">
                <div class="board-header">
                  <span class="board-name">{{ board.name }}</span>
                  <el-tag :type="getStatusTagType(board.status)" size="small">
                    {{ board.status }}
                  </el-tag>
                </div>
                <div class="board-info">
                  <div class="info-row">
                    <span class="label">类型:</span>
                    <span class="value">{{ board.type }}</span>
                  </div>
                  <div class="info-row">
                    <span class="label">型号:</span>
                    <span class="value">{{ board.model }}</span>
                  </div>
                  <div class="info-row">
                    <span class="label">端口数:</span>
                    <span class="value">{{ board.portCount }}个</span>
                  </div>
                  <div class="info-row">
                    <span class="label">更新时间:</span>
                    <span class="value">{{ board.updateTime }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 端口详情卡片 -->
      <div v-if="selectedBoard && boardPorts.length > 0" class="independent-card port-card-container">
        <div class="card-header">
          <h4>
            <el-icon style="margin-right: 5px;"><Connection /></el-icon>
            {{ selectedBoard.name }} - 端口详情 ({{ boardPorts.length }}个)
          </h4>
          <el-button type="text" @click="closePortDetails" size="small">
            <el-icon>X<Close /></el-icon>
          </el-button>
        </div>
        <div class="card-content">
          <div class="port-list">
            <div 
              v-for="port in boardPorts" 
              :key="port.id"
              class="port-card"
              :class="getPortStatusClass(port.status)">
              <div class="port-header">
                <span class="port-name">{{ port.name }}</span>
                <el-tag :type="getPortStatusTagType(port.status)" size="small">
                  {{ port.status }}
                </el-tag>
              </div>
              <div class="port-info">
                <div class="info-row">
                  <span class="label">端口类型:</span>
                  <span class="value">{{ port.type }}</span>
                </div>
                <div class="info-row">
                  <span class="label">端口号:</span>
                  <span class="value">{{ port.portNumber }}</span>
                </div>
                <div class="info-row">
                  <span class="label">连接状态:</span>
                  <span class="value" :class="getConnectionStatusClass(port.connectionStatus)">
                    {{ port.connectionStatus }}
                  </span>
                </div>
                <div class="info-row">
                  <span class="label">最后更新:</span>
                  <span class="value">{{ port.updateTime }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
  </div>

  <script>
    const { createApp } = Vue;
    const { 
      ElMessage,
      ElIcon,
      ElButton,
      ElButtonGroup,
      ElInput,
      ElTree,
      ElTag,
      ElDescriptions,
      ElDescriptionsItem,
      ElDialog,
      ElTable,
      ElTableColumn,
      Location,
      Search,
      Refresh,
      Close,
      CircleCheck,
      OfficeBuilding,
      Monitor,
      Coin,
      Grid,
      Loading,
      Picture,
      FullScreen,
      Connection
    } = ElementPlus;

    // API配置
    const API_CONFIG = {
      // 服务器配置 - 可根据环境修改
      baseURL: 'https://kdbi.kdboss.cn',
      timeout: 10000,
      // API端点
      endpoints: {
        machineRoom: {
          list: '/api/machineRoom/list',
          page: '/api/machineRoom/page',
          byType: '/api/machineRoom/byType',
          byStatus: '/api/machineRoom/byStatus',
          byCompany: '/api/machineRoom/byCompany',
          search: '/api/machineRoom/search',
          byDevice: '/api/machineRoom/byDevice',
          statistics: '/api/machineRoom/statistics',
          businesses: '/api/machineRoom/businesses'
        },
        equipment: {
          byMachineRoomId: '/api/equipment/byMachineRoomId',
          byMachineRoomCode: '/api/equipment/byMachineRoomCode',
          byDeviceType: '/api/equipment/byDeviceType',
          byBrand: '/api/equipment/byBrand',
          search: '/api/equipment/search',
          byManagementIp: '/api/equipment/byManagementIp',
          byRack: '/api/equipment/byRack',
          byBusinessId: '/api/equipment/byBusinessId',
          countByMachineRoomId: '/api/equipment/countByMachineRoomId',
          countByMachineRoomCode: '/api/equipment/countByMachineRoomCode',
          statistics: '/api/equipment/statistics'
        },
        optfib: {
          all: '/api/optfib/all',
          byId: '/api/optfib',
          count: '/api/optfib/count'
        },
        order: {
          menu: '/api/order/menu'
        }
      }
    };

    // 创建axios实例
    const apiClient = axios.create({
      baseURL: API_CONFIG.baseURL,
      timeout: API_CONFIG.timeout,
      headers: {
        'Content-Type': 'application/json'
      }
    });

    // 请求拦截器
    apiClient.interceptors.request.use(
      config => {
        console.log('API请求:', config.method.toUpperCase(), config.url);
        return config;
      },
      error => {
        console.error('API请求错误:', error);
        return Promise.reject(error);
      }
    );

    // 响应拦截器
    apiClient.interceptors.response.use(
      response => {
        console.log('API响应:', response.status, response.config.url);
        return response;
      },
      error => {
        console.error('API响应错误:', error);
        ElMessage.error('网络请求失败: ' + (error.message || '未知错误'));
        return Promise.reject(error);
      }
    );

    // 设备数据接口 - 根据EquipmentDTO定义
    const EquipmentAPI = {
      // 根据机房ID获取设备列表
      async getEquipmentsByMachineRoomId(machineRoomId) {
        try {
          const response = await apiClient.get(API_CONFIG.endpoints.equipment.byMachineRoomId, {
            params: { machineRoomId }
          });
          return response.data;
        } catch (error) {
          console.error('根据机房ID获取设备列表失败:', error);
          throw error;
        }
      },

      // 根据机房编码获取设备列表
      async getEquipmentsByMachineRoomCode(machineRoomCode) {
        try {
          const response = await apiClient.get(API_CONFIG.endpoints.equipment.byMachineRoomCode, {
            params: { machineRoomCode }
          });
          return response.data;
        } catch (error) {
          console.error('根据机房编码获取设备列表失败:', error);
          throw error;
        }
      },

      // 根据设备类型获取设备列表
      async getEquipmentsByDeviceType(deviceType) {
        try {
          const response = await apiClient.get(API_CONFIG.endpoints.equipment.byDeviceType, {
            params: { deviceType }
          });
          return response.data;
        } catch (error) {
          console.error('根据设备类型获取设备列表失败:', error);
          throw error;
        }
      },

      // 根据品牌获取设备列表
      async getEquipmentsByBrand(brand) {
        try {
          const response = await apiClient.get(API_CONFIG.endpoints.equipment.byBrand, {
            params: { brand }
          });
          return response.data;
        } catch (error) {
          console.error('根据品牌获取设备列表失败:', error);
          throw error;
        }
      },

      // 设备名称模糊查询
      async searchEquipmentsByName(deviceName) {
        try {
          const response = await apiClient.get(API_CONFIG.endpoints.equipment.search, {
            params: { deviceName }
          });
          return response.data;
        } catch (error) {
          console.error('设备名称模糊查询失败:', error);
          throw error;
        }
      },

      // 根据管理IP获取设备
      async getEquipmentsByManagementIp(managementIp) {
        try {
          const response = await apiClient.get(API_CONFIG.endpoints.equipment.byManagementIp, {
            params: { managementIp }
          });
          return response.data;
        } catch (error) {
          console.error('根据管理IP获取设备失败:', error);
          throw error;
        }
      },

      // 根据机架获取设备列表
      async getEquipmentsByRack(rack) {
        try {
          const response = await apiClient.get(API_CONFIG.endpoints.equipment.byRack, {
            params: { rack }
          });
          return response.data;
        } catch (error) {
          console.error('根据机架获取设备列表失败:', error);
          throw error;
        }
      },

      // 根据业务ID获取设备列表
      async getEquipmentsByBusinessId(businessId) {
        try {
          const response = await apiClient.get(API_CONFIG.endpoints.equipment.byBusinessId, {
            params: { businessId }
          });
          return response.data;
        } catch (error) {
          console.error('根据业务ID获取设备列表失败:', error);
          throw error;
        }
      },

      // 统计机房设备数量
      async countEquipmentsByMachineRoomId(machineRoomId) {
        try {
          const response = await apiClient.get(API_CONFIG.endpoints.equipment.countByMachineRoomId, {
            params: { machineRoomId }
          });
          return response.data;
        } catch (error) {
          console.error('统计机房设备数量失败:', error);
          throw error;
        }
      },

      // 统计机房设备数量（按机房编码）
      async countEquipmentsByMachineRoomCode(machineRoomCode) {
        try {
          const response = await apiClient.get(API_CONFIG.endpoints.equipment.countByMachineRoomCode, {
            params: { machineRoomCode }
          });
          return response.data;
        } catch (error) {
          console.error('统计机房设备数量失败:', error);
          throw error;
        }
      },

      // 获取设备统计信息
      async getEquipmentStatistics() {
        try {
          const response = await apiClient.get(API_CONFIG.endpoints.equipment.statistics);
          return response.data;
        } catch (error) {
          console.error('获取设备统计信息失败:', error);
          throw error;
        }
      }
    };

    // 光缆数据接口 - 根据OptFibDTO定义
    const OptFibAPI = {
      // 获取所有光缆数据
      async getAllOptFibs() {
        try {
          const response = await apiClient.get(API_CONFIG.endpoints.optfib.all);
          return response.data;
        } catch (error) {
          console.error('获取光缆数据失败:', error);
          throw error;
        }
      },

      // 根据ID获取光缆数据
      async getOptFibById(id) {
        try {
          const response = await apiClient.get(`${API_CONFIG.endpoints.optfib.byId}/${id}`);
          return response.data;
        } catch (error) {
          console.error('根据ID获取光缆数据失败:', error);
          throw error;
        }
      },

      // 获取光缆总数
      async getOptFibCount() {
        try {
          const response = await apiClient.get(API_CONFIG.endpoints.optfib.count);
          return response.data;
        } catch (error) {
          console.error('获取光缆总数失败:', error);
          throw error;
        }
      }
    };

    // 机房数据接口 - 根据MachineRoomDTO定义
    const MachineRoomAPI = {
      // 获取所有机房列表
      async getAllRooms() {
        try {
          const response = await apiClient.get(API_CONFIG.endpoints.machineRoom.list);
          return response.data;
        } catch (error) {
          console.error('获取机房列表失败:', error);
          throw error;
        }
      },
      
      // 获取机房关联的业务信息
      async getRoomBusinesses(roomCode) {
        try {
          const response = await apiClient.get(API_CONFIG.endpoints.machineRoom.businesses, {
            params: { roomCode }
          });
          return response.data;
        } catch (error) {
          console.error('获取机房业务信息失败:', error);
          throw error;
        }
      },

      // 分页查询机房
      async getRoomsByPage(page = 1, size = 10) {
        try {
          const response = await apiClient.get(API_CONFIG.endpoints.machineRoom.page, {
            params: { page, size }
          });
          return response.data;
        } catch (error) {
          console.error('分页查询机房失败:', error);
          throw error;
        }
      },

      // 按机房类型查询
      async getRoomsByType(roomType) {
        try {
          const response = await apiClient.get(API_CONFIG.endpoints.machineRoom.byType, {
            params: { roomType }
          });
          return response.data;
        } catch (error) {
          console.error('按类型查询机房失败:', error);
          throw error;
        }
      },

      // 按运行状态查询
      async getRoomsByStatus(status) {
        try {
          const response = await apiClient.get(API_CONFIG.endpoints.machineRoom.byStatus, {
            params: { status }
          });
          return response.data;
        } catch (error) {
          console.error('按状态查询机房失败:', error);
          throw error;
        }
      },

      // 按公司名称查询
      async getRoomsByCompany(companyName) {
        try {
          const response = await apiClient.get(API_CONFIG.endpoints.machineRoom.byCompany, {
            params: { companyName }
          });
          return response.data;
        } catch (error) {
          console.error('按公司查询机房失败:', error);
          throw error;
        }
      },

      // 机房名称模糊查询
      async searchRoomsByName(roomName) {
        try {
          const response = await apiClient.get(API_CONFIG.endpoints.machineRoom.search, {
            params: { roomName }
          });
          return response.data;
        } catch (error) {
          console.error('模糊查询机房失败:', error);
          throw error;
        }
      },

      // 按设备编号查询
      async getRoomsByDevice(deviceNumber) {
        try {
          const response = await apiClient.get(API_CONFIG.endpoints.machineRoom.byDevice, {
            params: { deviceNumber }
          });
          return response.data;
        } catch (error) {
          console.error('按设备编号查询机房失败:', error);
          throw error;
        }
      },

      // 获取机房统计信息
      async getRoomStatistics() {
        try {
          const response = await apiClient.get(API_CONFIG.endpoints.machineRoom.statistics);
          return response.data;
        } catch (error) {
          console.error('获取机房统计信息失败:', error);
          throw error;
        }
      }
    };

    // 订单菜单接口
    const OrderMenuAPI = {
      // 获取订单菜单结构
      async getOrderMenu() {
        try {
          const response = await apiClient.get(API_CONFIG.endpoints.order.menu);
          return response.data;
        } catch (error) {
          console.error('获取订单菜单失败:', error);
          throw error;
        }
      }
    };

    createApp({
      components: {
        ElIcon,
        ElButton,
        ElButtonGroup,
        ElInput,
        ElTree,
        ElTag,
        ElDescriptions,
        ElDescriptionsItem,
        ElDialog,
        ElTable,
        ElTableColumn,
        Location,
        Search,
        Refresh,
        Close,
        CircleCheck,
        OfficeBuilding,
        Monitor,
        Coin,
        Grid,
        Loading,
        Picture,
        FullScreen,
        Connection
      },
      data() {
        return {
          searchText: '',
          map: null,
          mapLoaded: false,
          selectedNode: null,
          businessData: [],
          treeProps: {
            children: 'children',
            label: 'name'
          },
          // 订单菜单数据
          orderMenuData: [],
          orderTreeProps: {
            children: 'children',
            label: 'name'
          },
          markers: [],
          roomMarkers: [], // 机房标记数组
          zoomDebounceTimer: null, // 缩放防抖定时器
          currentMapLayer: 3, // 1=标准图层, 2=卫星图层, 3=深色图层
          currentLayers: [], // 存储当前添加的图层
          showFiberLines: true, // 是否显示光缆线
        fiberLines: [], // 光缆线
        selectedFiber: null, // 选中的光缆
          selectedRoom: null,
          selectedDevice: null,
          selectedBoard: null,
          selectedBusinesses: [], // 机房关联的多个业务
          roomDevices: [],
          deviceBoards: [],
          boardPorts: [],
        // 真实数据
        realMachineRooms: [],
        realOptFibs: [], // 光缆数据
        loading: false,
        // 菜单高亮状态管理
        menuHighlightState: {
          currentHighlightedMenu: null, // 当前高亮的菜单项 {type, data, id}
          isMenuHighlightActive: false, // 菜单高亮是否激活
          highlightedElements: [] // 当前高亮的元素列表
        },
          // 模拟真实业务数据
          mockData: {
            businesses: [
              {
                id: 1,
                name: '广电苹果业务',
                status: '在线',
                updateTime: '2024-01-15 14:30:25'
              },
              {
                id: 2,
                name: '移动橙子业务',
                status: '在线',
                updateTime: '2024-01-15 14:25:18'
              },
              {
                id: 3,
                name: '联通香蕉业务',
                status: '警告',
                updateTime: '2024-01-15 14:20:33'
              }
            ],
            rooms: [
              // 广电苹果业务机房
              { id: 101, businessId: 1, name: '北京核心机房', city: '北京', address: '北京市朝阳区建国门外大街1号', status: '在线', deviceCount: 15, updateTime: '2024-01-15 14:30:25', lnglat: [116.405285, 39.904989], portStatus: 'normal' },
              { id: 102, businessId: 1, name: '上海汇聚机房', city: '上海', address: '上海市浦东新区陆家嘴环路1000号', status: '在线', deviceCount: 12, updateTime: '2024-01-15 14:25:12', lnglat: [121.472644, 31.231706], portStatus: 'normal' },
              { id: 103, businessId: 1, name: '广州接入机房', city: '广州', address: '广州市天河区珠江新城花城大道85号', status: '在线', deviceCount: 8, updateTime: '2024-01-15 14:28:45', lnglat: [113.264385, 23.129114], portStatus: 'normal' },
              { id: 104, businessId: 1, name: '深圳边缘机房', city: '深圳', address: '深圳市南山区科技园南区深圳湾科技生态园', status: '警告', deviceCount: 6, updateTime: '2024-01-15 14:15:33', lnglat: [114.057868, 22.543099], portStatus: 'normal' },
              
              // 移动橙子业务机房
              { id: 201, businessId: 2, name: '杭州核心机房', city: '杭州', address: '杭州市西湖区文三路90号', status: '在线', deviceCount: 18, updateTime: '2024-01-15 14:25:18', lnglat: [120.15507, 30.274084], portStatus: 'normal' },
              { id: 202, businessId: 2, name: '南京汇聚机房', city: '南京', address: '南京市玄武区珠江路280号', status: '在线', deviceCount: 14, updateTime: '2024-01-15 14:20:45', lnglat: [118.796877, 32.060255], portStatus: 'normal' },
              { id: 203, businessId: 2, name: '武汉接入机房', city: '武汉', address: '武汉市洪山区光谷大道77号', status: '在线', deviceCount: 9, updateTime: '2024-01-15 14:22:30', lnglat: [114.305558, 30.592777], portStatus: 'normal' },
              
              // 联通香蕉业务机房
              { id: 301, businessId: 3, name: '成都核心机房', city: '成都', address: '成都市高新区天府大道1388号', status: '警告', deviceCount: 11, updateTime: '2024-01-15 14:20:33', lnglat: [104.066541, 30.572269], portStatus: 'normal' },
              { id: 302, businessId: 3, name: '西安汇聚机房', city: '西安', address: '西安市雁塔区高新一路5号', status: '离线', deviceCount: 7, updateTime: '2024-01-15 13:45:22', lnglat: [108.95422, 34.265216], portStatus: 'normal' }
            ],
            devices: [
              // 北京核心机房设备
              { id: 1001, roomId: 101, name: '核心路由器-CR01', brand: '华为', model: 'NE40E-X16', status: '在线', boardCount: 16, portCount: 128, updateTime: '2024-01-15 14:30:25' },
              { id: 1002, roomId: 101, name: '汇聚交换机-SW01', brand: '华三', model: 'S12500X-AF', status: '在线', boardCount: 8, portCount: 96, updateTime: '2024-01-15 14:28:15' },
              { id: 1003, roomId: 101, name: '防火墙-FW01', brand: '山石', model: 'SG-6000-X7180', status: '在线', boardCount: 4, portCount: 64, updateTime: '2024-01-15 14:26:42' },
              
              // 上海汇聚机房设备
              { id: 1004, roomId: 102, name: '核心路由器-CR02', brand: '华为', model: 'NE40E-X8', status: '在线', boardCount: 8, portCount: 64, updateTime: '2024-01-15 14:25:12' },
              { id: 1005, roomId: 102, name: '汇聚交换机-SW02', brand: '思科', model: 'Catalyst 9500', status: '在线', boardCount: 6, portCount: 48, updateTime: '2024-01-15 14:23:18' },
              
              // 更多设备数据...
            ],
            boards: [
              // 核心路由器CR01的单板
                { id: 2001, deviceId: 1001, name: '主控板-MPU', type: '主控板', model: 'MPU-2000', status: 'normal', portCount: 2, updateTime: '2024-01-15 14:30:25' },
                { id: 2002, deviceId: 1001, name: '交换网板-SFU', type: '交换网板', model: 'SFU-3000', status: 'normal', portCount: 2, updateTime: '2024-01-15 14:30:20' },
                { id: 2003, deviceId: 1001, name: '业务板-LPU', type: '业务板', model: 'LPU-4000', status: 'normal', portCount: 8, updateTime: '2024-01-15 14:30:15' },
                
                // 汇聚交换机SW01的单板
                { id: 2004, deviceId: 1002, name: '主控板-MPU', type: '主控板', model: 'MPU-1000', status: 'normal', portCount: 0, updateTime: '2024-01-15 14:28:15' },
                { id: 2005, deviceId: 1002, name: '业务板-LPU', type: '业务板', model: 'LPU-2000', status: 'normal', portCount: 4, updateTime: '2024-01-15 14:28:10' },
                
                // 防火墙FW01的单板
                { id: 2006, deviceId: 1003, name: '主控板-MPU', type: '主控板', model: 'MPU-500', status: 'normal', portCount: 0, updateTime: '2024-01-15 14:26:42' },
                { id: 2007, deviceId: 1003, name: '业务板-LPU', type: '业务板', model: 'LPU-1000', status: 'normal', portCount: 4, updateTime: '2024-01-15 14:26:35' },
              ],
              ports: [
                // 主控板-MPU的端口
                { id: 3001, boardId: 2001, deviceId: 1001, name: 'CONSOLE', type: '控制台', portNumber: 'CONSOLE', status: 'normal', connectionStatus: 'connected', updateTime: '2024-01-15 14:30:25' },
                { id: 3002, boardId: 2001, deviceId: 1001, name: 'AUX', type: '辅助端口', portNumber: 'AUX', status: 'normal', connectionStatus: 'disconnected', updateTime: '2024-01-15 14:30:20' },
                
                // 交换网板-SFU的端口
                { id: 3003, boardId: 2002, deviceId: 1001, name: 'SFU-1', type: '交换网端口', portNumber: 'SFU-1', status: 'normal', connectionStatus: 'connected', updateTime: '2024-01-15 14:29:45' },
                { id: 3004, boardId: 2002, deviceId: 1001, name: 'SFU-2', type: '交换网端口', portNumber: 'SFU-2', status: 'normal', connectionStatus: 'connected', updateTime: '2024-01-15 14:29:40' },
                
                // 业务板-LPU的端口
                { id: 3005, boardId: 2003, deviceId: 1001, name: 'GE0/0/1', type: '千兆以太网', portNumber: '0/0/1', status: 'normal', connectionStatus: 'connected', updateTime: '2024-01-15 14:30:25' },
                { id: 3006, boardId: 2003, deviceId: 1001, name: 'GE0/0/2', type: '千兆以太网', portNumber: '0/0/2', status: 'normal', connectionStatus: 'connected', updateTime: '2024-01-15 14:30:20' },
                { id: 3007, boardId: 2003, deviceId: 1001, name: 'GE0/0/3', type: '千兆以太网', portNumber: '0/0/3', status: 'warning', connectionStatus: 'connected', updateTime: '2024-01-15 14:29:15' },
                { id: 3008, boardId: 2003, deviceId: 1001, name: 'GE0/0/4', type: '千兆以太网', portNumber: '0/0/4', status: 'error', connectionStatus: 'disconnected', updateTime: '2024-01-15 14:25:30' },
                { id: 3009, boardId: 2003, deviceId: 1001, name: 'GE0/0/5', type: '千兆以太网', portNumber: '0/0/5', status: 'unused', connectionStatus: 'unknown', updateTime: '2024-01-15 14:20:45' },
                { id: 3010, boardId: 2003, deviceId: 1001, name: 'XGE0/0/1', type: '万兆以太网', portNumber: '0/0/1', status: 'normal', connectionStatus: 'connected', updateTime: '2024-01-15 14:30:10' },
                { id: 3011, boardId: 2003, deviceId: 1001, name: 'XGE0/0/2', type: '万兆以太网', portNumber: '0/0/2', status: 'normal', connectionStatus: 'connected', updateTime: '2024-01-15 14:30:05' },
                { id: 3012, boardId: 2003, deviceId: 1001, name: 'XGE0/0/3', type: '万兆以太网', portNumber: '0/0/3', status: 'warning', connectionStatus: 'connected', updateTime: '2024-01-15 14:28:50' },
                
                // 汇聚交换机SW01业务板的端口
                { id: 3013, boardId: 2005, deviceId: 1002, name: 'GE1/0/1', type: '千兆以太网', portNumber: '1/0/1', status: 'normal', connectionStatus: 'connected', updateTime: '2024-01-15 14:28:15' },
                { id: 3014, boardId: 2005, deviceId: 1002, name: 'GE1/0/2', type: '千兆以太网', portNumber: '1/0/2', status: 'normal', connectionStatus: 'connected', updateTime: '2024-01-15 14:28:10' },
                { id: 3015, boardId: 2005, deviceId: 1002, name: 'GE1/0/3', type: '千兆以太网', portNumber: '1/0/3', status: 'unused', connectionStatus: 'unknown', updateTime: '2024-01-15 14:25:20' },
                { id: 3016, boardId: 2005, deviceId: 1002, name: 'GE1/0/4', type: '千兆以太网', portNumber: '1/0/4', status: 'error', connectionStatus: 'disconnected', updateTime: '2024-01-15 14:20:30' },
                
                // 防火墙FW01业务板的端口
                { id: 3017, boardId: 2007, deviceId: 1003, name: 'ETH0/0/1', type: '以太网', portNumber: '0/0/1', status: 'normal', connectionStatus: 'connected', updateTime: '2024-01-15 14:26:42' },
                { id: 3018, boardId: 2007, deviceId: 1003, name: 'ETH0/0/2', type: '以太网', portNumber: '0/0/2', status: 'normal', connectionStatus: 'connected', updateTime: '2024-01-15 14:26:35' },
                { id: 3019, boardId: 2007, deviceId: 1003, name: 'ETH0/0/3', type: '以太网', portNumber: '0/0/3', status: 'warning', connectionStatus: 'connected', updateTime: '2024-01-15 14:25:15' },
                { id: 3020, boardId: 2007, deviceId: 1003, name: 'ETH0/0/4', type: '以太网', portNumber: '0/0/4', status: 'unused', connectionStatus: 'unknown', updateTime: '2024-01-15 14:22:10' },
              
              // 更多端口数据...
            ]
          }
        };
      },
      mounted() {
        console.log('页面挂载完成，开始初始化...');
        this.initMap();
        this.loadRealData();
      },
      
      beforeUnmount() {
        // 清理定时器，避免内存泄漏
        if (this.zoomDebounceTimer) {
          clearTimeout(this.zoomDebounceTimer);
          this.zoomDebounceTimer = null;
        }
      },
      methods: {
        // 格式化机房名称：宽度-城市-机房
        formatRoomName(room) {
          const city = room.city || '宽度';
          const roomName = room.name || '未知机房';
          return `${city}-${roomName}`;
        },
        
        // 格式化悬浮提示的机房名称：宽度城市机房
        formatHoverRoomName(room) {
          const width = '宽度';
          const city = room.city || '未知城市';
          const roomName = room.name || '未知机房';
          return `${width}${city}机房`;
        },
        
        // 加载真实数据
        async loadRealData() {
          console.log('开始加载真实机房数据...');
          this.loading = true;
          
          try {
            // 并行加载机房数据、光缆数据和订单菜单数据
            const [roomResponse, fiberResponse, orderMenuResponse] = await Promise.all([
              MachineRoomAPI.getAllRooms(),
              OptFibAPI.getAllOptFibs(),
              OrderMenuAPI.getOrderMenu()
            ]);
            
            console.log('机房API响应:', roomResponse);
            console.log('光缆API响应:', fiberResponse);
            console.log('订单菜单API响应:', orderMenuResponse);
            
            if (roomResponse && roomResponse.code === 200 && roomResponse.data) {
              this.realMachineRooms = roomResponse.data;
              console.log('成功加载机房数据，共', this.realMachineRooms.length, '条记录');
            } else {
              console.warn('机房API返回数据格式异常:', roomResponse);
              this.realMachineRooms = [];
            }
            
            if (fiberResponse && fiberResponse.code === 200 && fiberResponse.data) {
              this.realOptFibs = fiberResponse.data;
              console.log('成功加载光缆数据，共', this.realOptFibs.length, '条记录');
            } else {
              console.warn('光缆API返回数据格式异常:', fiberResponse);
              this.realOptFibs = [];
            }
            
            if (orderMenuResponse && orderMenuResponse.code === 200 && orderMenuResponse.data) {
              this.orderMenuData = this.transformOrderMenuData(orderMenuResponse.data);
              console.log('成功加载订单菜单数据，共', this.orderMenuData.length, '个客户');
              console.log('订单菜单数据详情:', this.orderMenuData);
            } else {
              console.warn('订单菜单API返回数据格式异常:', orderMenuResponse);
              this.orderMenuData = [];
            }
            
            if (this.realMachineRooms.length > 0) {
              // 生成业务数据（基于真实机房数据）
              this.generateBusinessDataFromReal();
              
              // 如果地图已加载，添加标记和光缆线
              if (this.mapLoaded) {
                this.addMarkersToMap();
                // 添加光缆线
                this.addFiberLinesToMap();
              }
              
              ElMessage.success(`成功加载 ${this.realMachineRooms.length} 个机房数据和 ${this.realOptFibs.length} 条光缆数据`);
            } else {
              console.warn('没有有效的机房数据，使用模拟数据');
              //ElMessage.warning('数据格式异常，使用模拟数据');
              this.generateBusinessData();
            }
          } catch (error) {
            console.error('加载真实数据失败:', error);
            ElMessage.error('加载数据失败，使用模拟数据');
            this.generateBusinessData();
          } finally {
            this.loading = false;
          }
        },
        
        // 转换订单菜单数据为树形结构
        transformOrderMenuData(menuData) {
          if (!menuData || !menuData.customerList) {
            return [];
          }
          
          return menuData.customerList.map((customer, customerIndex) => {
            const customerNode = {
              id: `customer_${customer.customerId || customerIndex}`,
              name: customer.customerName,
              type: 'customer',
              customerCode: customer.customerCode,
              businessCount: customer.businessCount,
              children: []
            };
            
            // 添加业务节点
            if (customer.businessList && customer.businessList.length > 0) {
              customer.businessList.forEach((business, businessIndex) => {
                const businessNode = {
                  id: `business_${business.businessId || `${customerNode.id}_${businessIndex}`}`,
                  name: business.businessName,
                  type: 'business',
                  businessCode: business.businessCode,
                  fiberCount: business.fiberCount,
                  equipmentCount: business.equipmentCount,
                  children: []
                };
                
                // 添加光缆节点
                if (business.fiberList && business.fiberList.length > 0) {
                  const fiberGroupNode = {
                    id: `fiber_group_${businessNode.id}`,
                    name: '光缆',
                    type: 'fiber_group',
                    children: business.fiberList.map((fiber, fiberIndex) => ({
                      id: `fiber_${fiber.fiberId || `${businessNode.id}_fiber_${fiberIndex}`}`,
                      name: fiber.fiberName,
                      type: 'fiber',
                      fiberCode: fiber.fiberCode,
                      startLocation: fiber.startLocation,
                      endLocation: fiber.endLocation,
                      ownershipUnit: fiber.ownershipUnit,
                      children: []
                    }))
                  };
                  businessNode.children.push(fiberGroupNode);
                }
                
                // 添加设备节点
                if (business.equipmentList && business.equipmentList.length > 0) {
                  const equipmentGroupNode = {
                    id: `equipment_group_${businessNode.id}`,
                    name: '设备',
                    type: 'equipment_group',
                    children: business.equipmentList.map((equipment, equipmentIndex) => ({
                      id: `equipment_${equipment.equipmentId || `${businessNode.id}_equipment_${equipmentIndex}`}`,
                      name: equipment.equipmentName,
                      type: 'equipment',
                      equipmentCode: equipment.equipmentCode,
                      rackName: equipment.rackName,
                      machineRoomName: equipment.machineRoomName,
                      machineRoomCode: equipment.machineRoomCode,
                      slotPosition: equipment.slotPosition,
                      children: []
                    }))
                  };
                  businessNode.children.push(equipmentGroupNode);
                }
                
                customerNode.children.push(businessNode);
              });
            }
            
            return customerNode;
          });
        },
        
        // 基于真实数据生成业务数据
        generateBusinessDataFromReal() {
          console.log('基于真实机房数据生成业务数据...');
          const businessData = [];
          
          // 按公司名称分组
          const companyGroups = {};
          this.realMachineRooms.forEach(room => {
            const companyName = room.companyName || '未知公司';
            if (!companyGroups[companyName]) {
              companyGroups[companyName] = [];
            }
            companyGroups[companyName].push(room);
          });
          
          // 为每个公司创建业务线
          Object.keys(companyGroups).forEach((companyName, index) => {
            const rooms = companyGroups[companyName];
            const businessNode = {
              id: index + 1,
              name: `${companyName}业务线`,
              type: 'business',
              status: '在线',
              updateTime: new Date().toLocaleString(),
              children: []
            };
            
            // 为每个机房创建节点
            rooms.forEach(room => {
              const roomNode = {
                id: room.roomId,
                name: room.roomName || '未命名机房',
                type: 'room',
                city: this.extractCityFromAddress(room.address),
                address: room.address || '地址未知',
                status: room.status || '未知',
                level: room.level || '未知', // 使用真实的level字段
                deviceCount: 0, // 真实数据中没有设备数量，设为0
                updateTime: room.createTime ? new Date(room.createTime).toLocaleString() : '未知',
                lnglat: room.longitude && room.latitude ? [room.longitude, room.latitude] : null,
                portStatus: 'normal', // 默认端口状态
                roomCode: room.deviceNumber || room.roomId, // 使用deviceNumber作为机房编码
                roomType: room.roomType, // 保留roomType字段
                companyName: room.companyName, // 保留公司名称
                children: []
              };
              
              businessNode.children.push(roomNode);
            });
            
            businessData.push(businessNode);
          });
          
          this.businessData = businessData;
          console.log('业务数据生成完成，共', businessData.length, '条业务线');
          
          // 详细输出每条业务线的信息
          businessData.forEach(business => {
            console.log(`业务线: ${business.name}, 机房数量: ${business.children.length}`);
            business.children.forEach(room => {
              console.log(`  - 机房: ${room.name}, 坐标: [${room.lnglat ? room.lnglat.join(', ') : '无坐标'}]`);
            });
          });
        },

        // 从地址中提取城市信息
        extractCityFromAddress(address) {
          if (!address) return '未知城市';
          
          // 简单的城市提取逻辑
          const cityPatterns = [
            /([^省]+市)/,
            /([^自治区]+市)/,
            /([^特别行政区]+市)/
          ];
          
          for (const pattern of cityPatterns) {
            const match = address.match(pattern);
            if (match) {
              return match[1];
            }
          }
          
          return '未知城市';
        },

        initMap() {
          console.log('开始初始化地图...');
          
          // 检查AMap是否可用
          if (typeof AMap === 'undefined') {
            console.error('高德地图API未加载');
            ElMessage.error('地图加载失败，请刷新页面重试');
            return;
          }
          
          try {
            console.log('创建地图实例...');
            this.map = new AMap.Map('map', {
              zoom: 6,
              center: [115.892151, 28.676493], // 南昌坐标
              resizeEnable: true,
              mapStyle: 'amap://styles/dark', // 深色图层
              viewMode: '2D',
              features: ['bg', 'road', 'building', 'point']
            });
            
            console.log('地图初始化成功');
            this.mapLoaded = true;
            
            // 添加地图控件
            this.map.addControl(new AMap.Scale({
              position: 'LB'
            }));
            this.map.addControl(new AMap.ToolBar({
              position: 'RB'
            }));
            
            // 监听地图加载完成事件
            this.map.on('complete', () => {
              console.log('地图加载完成');
              setTimeout(() => {
                this.map.resize();
                console.log('地图大小调整完成');
                // 设置默认深色图层
                this.map.setMapStyle('amap://styles/dark');
                console.log('已设置默认深色图层');
                // 地图加载完成后添加标记
                this.addMarkersToMap();
              }, 200);
            });
            
            // 监听地图缩放事件 - 添加防抖功能
            this.map.on('zoomchange', () => {
              console.log('地图缩放级别改变，等待1秒后重新渲染标记');
              // 清除之前的定时器
              if (this.zoomDebounceTimer) {
                clearTimeout(this.zoomDebounceTimer);
              }
              // 设置新的定时器，1秒后执行渲染
              this.zoomDebounceTimer = setTimeout(() => {
                console.log('缩放停止1秒，开始重新渲染标记');
                this.addMarkersToMap();
              }, 1000);
            });
            
            // 监听地图大小变化
            this.map.on('resize', () => {
              console.log('地图大小已调整');
            });
            
            // 监听地图错误
            this.map.on('error', (error) => {
              console.error('地图错误:', error);
              //ElMessage.warning('地图加载遇到问题，但基本功能可用');
            });
            
            // 监听地图点击事件 - 只处理空白区域清除
            this.map.on('click', (e) => {
              console.log('地图点击事件触发');
              
              // 检查是否点击了标记、线段或信息窗口
              const target = e.originalEvent && e.originalEvent.target ? e.originalEvent.target : null;
              const isInteractiveElement = target && (
                                          target.closest('.map-marker') || 
                                          target.closest('.amap-marker') || 
                                          target.closest('[class*="marker"]') ||
                                          target.closest('.amap-polyline') || 
                                          target.closest('[class*="polyline"]') ||
                                          target.closest('.amap-info') || 
                                          target.closest('[class*="info"]') ||
                                          target.closest('.amap-toolbar') ||
                                          target.closest('.amap-scale') ||
                                          target.closest('.amap-controlbar')
                                        );
              
              console.log('点击检测 - 是否为交互元素:', !!isInteractiveElement);
              
              // 如果点击了非交互元素（空白区域），清除状态
              if (!isInteractiveElement) {
                  console.log('点击地图空白区域，清除所有信息卡片');
                this.clearMenuHighlight();
                this.clearAllMarkerHighlight();
                  this.closeAllCards(false);
                 // ElMessage.info('已清除所有信息卡片');
              } else {
                console.log('点击了交互元素，保持当前状态');
              }
            });
            
          } catch (error) {
            console.error('地图初始化失败:', error);
            //ElMessage.warning('地图初始化遇到问题，请检查网络连接');
            this.mapLoaded = false;
            
            // 即使地图初始化失败，也尝试显示标记
            setTimeout(() => {
              this.showFallbackMap();
            }, 1000);
          }
        },
        
        showFallbackMap() {
          console.log('显示备用地图方案...');
          const mapContainer = document.getElementById('map');
          if (mapContainer) {
            mapContainer.innerHTML = `
              <div style="
                display: flex; 
                flex-direction: column; 
                align-items: center; 
                justify-content: center; 
                height: 100%; 
                background: #f5f7fa;
                color: #666;
                text-align: center;
                padding: 20px;
              ">
                <div style="font-size: 48px; margin-bottom: 20px;">🗺️</div>
                <h3 style="margin-bottom: 10px; color: #333;">地图加载中...</h3>
                <p style="margin-bottom: 20px;">正在尝试加载地图服务</p>
                <div style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;">
                  ${this.businessData.map(business => 
                    business.children.map(room => 
                      `<div style="
                        background: white; 
                        padding: 10px; 
                        border-radius: 8px; 
                        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                        min-width: 200px;
                        border-left: 4px solid ${this.getStatusColor(room.status)};
                      ">
                        <div style="font-weight: bold; margin-bottom: 5px;">${this.formatRoomName(room)}</div>
                        <div style="font-size: 12px; color: #666;">${business.name}</div>
                        <div style="font-size: 12px; color: #666;">${room.city}</div>
                        <div style="font-size: 12px; color: ${this.getStatusColor(room.status)};">● ${room.status}</div>
                      </div>`
                    ).join('')
                  ).join('')}
                </div>
                <div style="margin-top: 20px; font-size: 12px; color: #999;">
                  如果地图无法正常显示，请检查网络连接或联系管理员
                </div>
              </div>
            `;
          }
        },
        
        generateBusinessData() {
          console.log('生成业务数据...');
          const businessData = [];
          
          console.log('模拟数据中的业务线数量:', this.mockData.businesses.length);
          console.log('模拟数据中的机房数量:', this.mockData.rooms.length);
          
          this.mockData.businesses.forEach(business => {
            const businessNode = {
              id: business.id,
              name: business.name,
              type: 'business',
              status: business.status,
              updateTime: business.updateTime,
              children: []
            };
            
            // 添加机房节点
            const rooms = this.mockData.rooms.filter(room => room.businessId === business.id);
            rooms.forEach(room => {
              const roomNode = {
                id: room.id,
                name: room.name,
                type: 'room',
                city: room.city,
                address: room.address,
                status: room.status,
                deviceCount: room.deviceCount,
                updateTime: room.updateTime,
                lnglat: room.lnglat,
                portStatus: room.portStatus, // 添加端口状态
                children: []
              };
              
              // 添加设备节点
              const devices = this.mockData.devices.filter(device => device.roomId === room.id);
              devices.forEach(device => {
                const deviceNode = {
                  id: device.id,
                  name: device.name,
                  type: 'device',
                  brand: device.brand,
                  model: device.model,
                  status: device.status,
                  boardCount: device.boardCount,
                  portCount: device.portCount,
                  updateTime: device.updateTime,
                  children: []
                };
                
                // 添加单板节点
                const boards = this.mockData.boards.filter(board => board.deviceId === device.id);
                boards.forEach(board => {
                  const boardNode = {
                    id: board.id,
                    name: board.name,
                    type: 'board',
                    boardType: board.type,
                    model: board.model,
                    status: board.status,
                    portCount: board.portCount,
                    updateTime: board.updateTime,
                    children: []
                  };
                  
                  // 添加端口节点
                  const ports = this.mockData.ports.filter(port => port.boardId === board.id);
                  ports.forEach(port => {
                    boardNode.children.push({
                      id: port.id,
                      name: port.name,
                      type: 'port',
                      portType: port.type,
                      portNumber: port.portNumber,
                      status: port.status,
                      connectionStatus: port.connectionStatus,
                      updateTime: port.updateTime
                    });
                  });
                  
                  deviceNode.children.push(boardNode);
                });
                
                roomNode.children.push(deviceNode);
              });
              
              businessNode.children.push(roomNode);
            });
            
            businessData.push(businessNode);
          });
          
          this.businessData = businessData;
          console.log('业务数据生成完成，共', businessData.length, '条业务线');
          
          // 详细输出每条业务线的信息
          businessData.forEach(business => {
            console.log(`业务线: ${business.name}, 机房数量: ${business.children.length}`);
            business.children.forEach(room => {
              console.log(`  - 机房: ${room.name}, 坐标: [${room.lnglat ? room.lnglat.join(', ') : '无坐标'}]`);
            });
          });
          
          // 如果地图已经加载，添加标记
          if (this.mapLoaded) {
              this.addMarkersToMap();
          }
        },
        
        addMarkersToMap() {
          console.log('开始添加地图标记...');
          
          if (!this.map) {
            console.warn('地图未初始化，跳过标记添加');
            return;
          }
          
          // 清除现有标记
          this.clearMarkers();
          
          let markerCount = 0;
          let validRoomsCount = 0;
          
          // 优先使用真实机房数据
          if (this.realMachineRooms && this.realMachineRooms.length > 0) {
            console.log(`使用真实机房数据，共 ${this.realMachineRooms.length} 个机房`);
            this.realMachineRooms.forEach(room => {
              // 处理真实数据的坐标格式 (longitude, latitude)
              const lnglat = room.longitude && room.latitude ? [room.longitude, room.latitude] : room.lnglat;
              
              // 严格验证坐标数据
              if (this.isValidCoordinate(lnglat)) {
                try {
                  // 创建包含正确坐标的机房对象
                  const roomWithCoords = {
                    ...room,
                    lnglat: lnglat,
                    name: room.roomName || room.name,
                    roomType: room.roomType,
                    roomCode: room.deviceNumber || room.roomId,
                    companyName: room.companyName,
                    level: room.level
                  };
                  
                  const marker = this.createRoomMarker(roomWithCoords, null);
                  if (marker) { // 检查标记是否应该显示
                    this.markers.push(marker);
                    this.map.add(marker);
                    markerCount++;
                    validRoomsCount++;
                    console.log(`添加真实机房标记: ${room.roomName} at [${lnglat[0]}, ${lnglat[1]}] roomType: ${room.roomType}`);
                  } else {
                    console.log(`真实机房被过滤: ${room.roomName} roomType: ${room.roomType} (缩放级别不匹配)`);
                  }
                } catch (error) {
                  console.error('创建真实机房标记失败:', room.roomName, error);
                }
              } else {
                console.warn('真实机房缺少有效坐标，跳过渲染:', room.roomName, '坐标:', lnglat);
              }
            });
          } else if (this.businessData && this.businessData.length > 0) {
            console.log(`使用业务数据，共 ${this.businessData.length} 条业务线`);
            this.businessData.forEach(business => {
              console.log(`处理业务线: ${business.name}, 包含 ${business.children.length} 个机房`);
              
              // 添加该业务线的所有机房标记
              business.children.forEach(room => {
                if (room.lnglat && room.lnglat.length === 2 && 
                    room.lnglat[0] && room.lnglat[1] && 
                    !isNaN(room.lnglat[0]) && !isNaN(room.lnglat[1])) {
                  try {
                    const marker = this.createRoomMarker(room, business);
                    if (marker) { // 检查标记是否应该显示
                      this.markers.push(marker);
                      this.map.add(marker);
                      markerCount++;
                      validRoomsCount++;
                      console.log(`添加业务机房标记: ${room.name} at [${room.lnglat[0]}, ${room.lnglat[1]}]`);
                    } else {
                      console.log(`业务机房被过滤: ${room.name} (缩放级别不匹配)`);
                    }
                  } catch (error) {
                    console.error(`创建业务机房标记失败 - ${room.name}:`, error);
                  }
                } else {
                  console.warn(`业务机房 ${room.name} 缺少有效坐标信息:`, room.lnglat);
                }
              });
            });
          } else {
            console.warn('没有可用的机房数据');
          }
          
          console.log(`成功添加 ${markerCount} 个地图标记`);
          console.log(`有效机房数量: ${validRoomsCount}`);
        },
        
        
        createRoomMarker(room, business) {
          // 检查当前地图缩放级别，决定是否显示该机房
          const currentZoom = this.map ? this.map.getZoom() : 10;
          const roomType = room.roomType || (room.name && room.name.includes('核心机房') ? '核心机房' : 
                          room.name && room.name.includes('汇聚机房') ? '汇聚机房' : 
                          room.name && room.name.includes('接入机房') ? '接入机房' : '其他');
          
          // 根据缩放级别和机房类型决定是否显示
          let shouldShow = false;
          if (roomType === '核心机房') {
            shouldShow = true; // 大于等于15时显示核心机房（红色）
          } else if (roomType === '接入机房') {
            shouldShow = currentZoom > 7;
          } else if (roomType === '汇聚机房') {
            shouldShow = currentZoom >= 5;
          } else {
            shouldShow = currentZoom >= 10 && currentZoom < 15; 
          }
          
          // 如果不应该显示，返回null
          if (!shouldShow) {
            return null;
          }
          
          // 创建自定义标记内容
          const markerContent = document.createElement('div');
          markerContent.className = 'map-marker';
          
          // 根据机房类型设置图标颜色和大小
          let iconColor = '#999999'; // 默认灰色
          let iconScale = 1; // 默认大小
          
          // 优先使用roomType字段进行判断
          if (room.roomType) {
            switch (room.roomType) {
              case '核心机房':
                iconColor = '#ff4d4f'; // 红色
                iconScale = 1.2; // 1.2倍大小
                break;
              case '汇聚机房':
                iconColor = '#1890ff'; // 蓝色
                iconScale = 1; // 正常大小
                break;
              case '接入机房':
                iconColor = '#52c41a'; // 绿色
                iconScale = 1; // 正常大小
                break;
              default:
                iconColor = '#999999'; // 默认灰色
                iconScale = 1; // 正常大小
            }
          } else {
            // 如果没有roomType字段，从机房名称中提取类型信息
            const roomName = room.name || '';
            if (roomName.includes('核心机房')) {
              iconColor = '#ff4d4f'; // 红色
              iconScale = 1.2; // 1.2倍大小
            } else if (roomName.includes('汇聚机房')) {
              iconColor = '#1890ff'; // 蓝色
              iconScale = 1; // 正常大小
            } else if (roomName.includes('接入机房')) {
              iconColor = '#52c41a'; // 绿色
              iconScale = 1; // 正常大小
            } else {
              iconColor = '#999999'; // 默认灰色
              iconScale = 1; // 正常大小
            }
          }
          
          // 格式化机房名称：宽度-城市-机房
          const formattedRoomName = this.formatRoomName(room);
          
          markerContent.innerHTML = `
            <div class="marker-dot" style="transform: scale(${iconScale});">
              <i class="iconfont icon-zuobiao" style="color: ${iconColor} !important;"></i>
            </div>
            <div class="marker-label">${formattedRoomName}</div>
          `;
          
          // 创建标记
          const marker = new AMap.Marker({
            position: new AMap.LngLat(room.lnglat[0], room.lnglat[1]),
            title: `${this.formatHoverRoomName(room)}${business ? ` (${business.name})` : ''}`,
            content: markerContent,
            anchor: 'center',
            offset: new AMap.Pixel(0, -12),
            extData: {
              room: room,
              business: business
            }
          });
          
          // 保存机房编码用于后续过滤
          marker.roomCode = room.roomCode || room.id;
          
          // 添加点击事件 - 精准点击，使用统一渲染
          marker.on('click', () => {
            console.log('精准点击标记:', room.name);
            console.log('机房编码:', room.roomCode);
            console.log('机房ID:', room.id);
            
            const roomCode = room.roomCode || room.id;
            if (roomCode) {
              console.log('使用机房编码进行渲染:', roomCode);
              this.renderByRoomCode(roomCode); // 调用统一函数
            } else {
              console.warn('机房缺少编码:', room.name);
              //ElMessage.warning('机房缺少编码，无法渲染');
            }
          });
          
          // 添加鼠标悬停事件 - 使用CSS类而不是内联样式
          marker.on('mouseover', () => {
            // 只有在不是高亮状态时才应用悬停效果
            if (!markerContent.classList.contains('highlighted-marker')) {
              markerContent.classList.add('marker-hover');
            }
          });
          
          marker.on('mouseout', () => {
            markerContent.classList.remove('marker-hover');
          });
          
          return marker;
        },
        
        openInfoWindow(room, business) {
          // 创建信息窗体内容
          const statusIcon = room.status === '在线' ? '●' : room.status === '警告' ? '▲' : '●';
          const content = `
            <div style="padding: 15px; min-width: 250px; font-family: 'Microsoft YaHei', sans-serif;">
              <div style="display: flex; align-items: center; margin-bottom: 12px;">
                <div style="width: 8px; height: 8px; border-radius: 50%; background-color: ${this.getStatusColor(room.status)}; margin-right: 8px;"></div>
                <div style="font-weight: bold; font-size: 16px; color: #333;">${this.formatRoomName(room)}</div>
              </div>
              <div style="background: #f8f9fa; padding: 10px; border-radius: 6px; margin-bottom: 10px;">
                <div style="color: #666; font-size: 13px; margin-bottom: 6px;">
                  <strong>业务线:</strong> ${business ? business.name : '未知业务'}
                </div>
                <div style="color: #666; font-size: 13px; margin-bottom: 6px;">
                  <strong>城市:</strong> ${room.city}
                </div>
                <div style="color: #666; font-size: 13px; margin-bottom: 6px;">
                  <strong>地址:</strong> ${room.address}
                </div>
                <div style="color: #666; font-size: 13px; margin-bottom: 6px;">
                  <strong>设备数:</strong> ${room.deviceCount} 台
                </div>
                <div style="color: ${this.getStatusColor(room.status)}; font-size: 13px; font-weight: bold;">
                  <strong>状态:</strong> ${statusIcon} ${room.status}
                </div>
              </div>
              <div style="text-align: center; color: #999; font-size: 11px;">
                最后更新: ${room.updateTime}
              </div>
            </div>
          `;
          
          // 创建信息窗体
          const infoWindow = new AMap.InfoWindow({
            content: content,
            offset: new AMap.Pixel(0, -40),
            isCustom: true,
            closeWhenClickMap: true
          });
          
          // 打开信息窗体
          infoWindow.open(this.map, new AMap.LngLat(room.lnglat[0], room.lnglat[1]));
        },
        
        clearMarkers() {
          // 清除业务标记
          if (this.markers && Array.isArray(this.markers)) {
            this.markers.forEach(marker => {
              if (marker && this.map) {
                this.map.remove(marker);
              }
            });
            this.markers = [];
          }
          
          // 清除机房标记
          if (this.roomMarkers && Array.isArray(this.roomMarkers)) {
            this.roomMarkers.forEach(marker => {
              if (marker && this.map) {
                this.map.remove(marker);
              }
            });
            this.roomMarkers = [];
          }
          
          console.log('已清除所有标记');
        },
        
        
        handleSearch() {
          const searchText = this.searchText.toLowerCase();
          
          this.clearHighlight(this.businessData);
          this.clearMarkerHighlight();
          
          if (searchText) {
            const matchedRooms = [];
            
            this.businessData.forEach(business => {
              if (business.name.toLowerCase().includes(searchText)) {
                business.highlight = true;
                this.expandAllNodes(business);
                
                business.children.forEach(room => {
                  if (room.lnglat) {
                    matchedRooms.push(room);
                  }
                });
              }
            });
            
            this.highlightMarkersByRooms(matchedRooms);
            
            if (matchedRooms.length === 1) {
              this.map.setCenter(matchedRooms[0].lnglat);
              this.map.setZoom(10);
            } else if (matchedRooms.length > 1) {
              const lnglats = matchedRooms.map(room => new AMap.LngLat(room.lnglat[0], room.lnglat[1]));
              this.map.setFitView(lnglats, false, [50, 50, 50, 50]);
            }
          }
        },
        
        highlightMarkersByRooms(rooms) {
          const roomIds = rooms.map(room => room.id);
          
          this.markers.forEach(marker => {
            const extData = marker.getExtData();
            if (extData && extData.room && roomIds.includes(extData.room.id)) {
              const content = marker.getContent();
              if (content) {
                // 使用CSS类而不是内联样式
                content.classList.add('search-highlight');
              }
            }
          });
        },
        
        clearMarkerHighlight() {
          this.markers.forEach(marker => {
            const content = marker.getContent();
            if (content) {
              // 检查是否是菜单高亮的元素
              const extData = marker.getExtData();
              const isMenuHighlighted = this.menuHighlightState.isMenuHighlightActive && 
                                      this.isMarkerMenuHighlighted(marker);
              
              if (!isMenuHighlighted) {
                // 移除所有高亮CSS类
                content.classList.remove('highlighted-marker', 'search-highlight', 'marker-hover');
              }
            }
          });
        },
        
        // 检查标记是否是菜单高亮的元素
        isMarkerMenuHighlighted(marker) {
          if (!this.menuHighlightState.isMenuHighlightActive) return false;
          
          const extData = marker.getExtData();
          if (!extData || !extData.room) return false;
          
          const roomCode = extData.room.roomCode || extData.room.deviceNumber || extData.room.id;
          const roomName = extData.room.name || extData.room.roomName;
          
          return this.menuHighlightState.highlightedElements.includes(roomCode) || 
                 this.menuHighlightState.highlightedElements.includes(roomName);
        },
        
        handleNodeClick(data) {
          console.log('树节点点击:', data.name, data.type);
          
          // 清空菜单选取状态，避免干扰
          this.clearMenuHighlight();
          
          if (data.type === 'business') {
            // 点击业务线，高亮显示整个业务线
            this.highlightBusinessLineOnMap(data);
            ElMessage.success(`已高亮显示业务线: ${data.name}`);
          } else if (data.type === 'room' && data.lnglat) {
            // 点击机房，使用统一渲染函数确保红色高亮
            const roomCode = data.roomCode || data.id;
            if (roomCode) {
              this.renderByRoomCode(roomCode); // 使用统一渲染函数
            } else {
              console.warn('机房缺少编码:', data.name);
              //ElMessage.warning('机房缺少编码，无法渲染');
            }
          } else if (data.type === 'device') {
            // 点击设备，先关闭所有卡片，然后打开设备详情
            this.selectDeviceFromTree(data);
          } else if (data.type === 'board') {
            // 点击单板，先关闭所有卡片，然后打开单板详情
            this.selectBoardFromTree(data);
          } else if (data.type === 'port') {
            // 点击端口，先关闭所有卡片，然后打开端口详情
            this.selectPortFromTree(data);
          }
        },
        
        // 处理订单节点点击
        handleOrderNodeClick(data) {
          console.log('订单节点点击:', data.name, data.type);
          
          // 检查是否是同一个菜单项点击（切换高亮状态）
          if (this.menuHighlightState.currentHighlightedMenu && 
              this.menuHighlightState.currentHighlightedMenu.id === data.id) {
            // 点击同一个菜单项，切换高亮状态
            this.toggleMenuHighlight(data);
            return;
          }
          
          // 清除之前的菜单高亮
          this.clearMenuHighlight();
          
          // 设置新的菜单高亮
          this.setMenuHighlight(data);
          
          // 根据菜单类型执行高亮操作
          this.executeMenuHighlight(data);
        },
        
        // 切换菜单高亮状态
        toggleMenuHighlight(data) {
          if (this.menuHighlightState.isMenuHighlightActive) {
            // 当前已高亮，切换为不高亮
            this.clearMenuHighlight();
           // ElMessage.info(`已取消高亮: ${data.name}`);
          } else {
            // 当前未高亮，切换为高亮
            this.setMenuHighlight(data);
            this.executeMenuHighlight(data);
           // ElMessage.info(`已高亮: ${data.name}`);
          }
        },
        
        // 设置菜单高亮状态
        setMenuHighlight(data) {
          this.menuHighlightState.currentHighlightedMenu = {
            type: data.type,
            data: data,
            id: data.id
          };
          this.menuHighlightState.isMenuHighlightActive = true;
          
          // 更新菜单项的选中状态
          this.updateMenuSelection(data.id, true);
        },
        
        // 清除菜单高亮状态
        clearMenuHighlight() {
          if (this.menuHighlightState.isMenuHighlightActive) {
            console.log('取消选择菜单，恢复显示所有元素');
            
            // 先清除地图上的高亮元素（在状态重置之前）
            this.clearAllHighlightsIncludingMenu();
            
            // 清空高亮编码集合
            this.highlightedRoomCodes.clear();
            this.highlightedFiberCodes.clear();
            
            // 恢复显示所有元素
            this.showAllMapElements();
            
            // 重置状态
            this.menuHighlightState.currentHighlightedMenu = null;
            this.menuHighlightState.isMenuHighlightActive = false;
            this.menuHighlightState.highlightedElements = [];
            
            // 清除菜单选中状态
            this.clearAllMenuSelection();
            
            console.log('菜单选择已取消，所有元素已恢复显示');
          }
        },
        
        // 执行菜单高亮操作
        executeMenuHighlight(data) {
          // 先隐藏所有地图元素，只显示对应的高亮数据
          this.hideAllMapElements();
          
          // 初始化高亮编码集合
          this.highlightedRoomCodes = new Set();
          this.highlightedFiberCodes = new Set();
          
          if (data.type === 'customer') {
            this.showCustomerData(data);
            this.highlightCustomerAll(data);
           // ElMessage.info(`客户: ${data.name} (${data.businessCount}个业务)`);
          } else if (data.type === 'business') {
            this.showBusinessData(data);
            this.highlightBusinessAll(data);
          //  ElMessage.info(`业务: ${data.name} (${data.fiberCount}条光缆, ${data.equipmentCount}台设备)`);
          } else if (data.type === 'fiber_group') {
            this.showFiberGroupData(data);
            this.highlightFiberGroup(data);
          //  ElMessage.info(`光缆组: ${data.name} (${data.children.length}条光缆)`);
          } else if (data.type === 'equipment_group') {
            this.showEquipmentGroupData(data);
            this.highlightEquipmentGroup(data);
          //  ElMessage.info(`设备组: ${data.name} (${data.children.length}台设备)`);
          } else if (data.type === 'fiber') {
            this.showFiberData(data);
            this.highlightSpecificFiber(data);
          //  ElMessage.info(`光缆: ${data.name} (${data.startLocation} → ${data.endLocation})`);
          } else if (data.type === 'equipment') {
            console.log('菜单点击设备 - 设备数据:', data);
            this.showEquipmentData(data);
            this.highlightEquipmentRoom(data);
            // ElMessage.info 已在 highlightEquipmentRoom 方法中处理
          }
          
          // 高亮完成后，隐藏非高亮的元素
          this.hideNonHighlightedElements();
        },
        
        // 隐藏所有地图元素
        hideAllMapElements() {
          console.log('隐藏所有地图元素，准备专注显示');
          
          // 隐藏所有机房标记
          if (this.roomMarkers) {
            this.roomMarkers.forEach(marker => {
              if (marker && marker.setMap) {
                marker.setMap(null); // 从地图上移除
              }
            });
          }
          
          // 隐藏所有光缆线条
          if (this.fiberPolylines) {
            this.fiberPolylines.forEach(polyline => {
              if (polyline && polyline.setMap) {
                polyline.setMap(null); // 从地图上移除
              }
            });
          }
          
          // 清空标记和线条数组
          this.roomMarkers = [];
          this.fiberPolylines = [];
          
          // 清除所有高亮状态
          this.clearAllHighlightsIncludingMenu();
        },
        
        // 显示客户相关数据
        showCustomerData(customerData) {
          console.log('显示客户数据:', customerData.name);
          
          if (customerData.children && customerData.children.length > 0) {
            customerData.children.forEach(business => {
              this.showBusinessData(business);
            });
          }
        },
        
        // 显示业务相关数据
        showBusinessData(businessData) {
          console.log('显示业务数据:', businessData.name);
          
          // 显示业务相关的机房
          this.showBusinessRooms(businessData);
          
          // 显示业务相关的光缆
          this.showBusinessFibers(businessData);
        },
        
        // 显示光缆组数据
        showFiberGroupData(fiberGroupData) {
          console.log('显示光缆组数据:', fiberGroupData.name);
          
          if (fiberGroupData.children && fiberGroupData.children.length > 0) {
            fiberGroupData.children.forEach(fiber => {
              this.showFiberData(fiber);
            });
          }
        },
        
        // 显示设备组数据
        showEquipmentGroupData(equipmentGroupData) {
          console.log('显示设备组数据:', equipmentGroupData.name);
          
          if (equipmentGroupData.children && equipmentGroupData.children.length > 0) {
            equipmentGroupData.children.forEach(equipment => {
              this.showEquipmentData(equipment);
            });
          }
        },
        
        // 显示单个光缆数据
        showFiberData(fiberData) {
          console.log('显示光缆数据:', fiberData.name);
          
          if (fiberData.startLocation && fiberData.endLocation) {
            const startRoom = this.findRoomByName(fiberData.startLocation);
            const endRoom = this.findRoomByName(fiberData.endLocation);
            
            if (startRoom && endRoom && startRoom.lnglat && endRoom.lnglat) {
              // 显示起始机房
              if (!this.roomMarkers.find(marker => marker.roomCode === startRoom.roomCode)) {
                const startMarker = this.createRoomMarker(startRoom);
                this.roomMarkers.push(startMarker);
                this.map.add(startMarker);
              }
              
              // 显示结束机房
              if (!this.roomMarkers.find(marker => marker.roomCode === endRoom.roomCode)) {
                const endMarker = this.createRoomMarker(endRoom);
                this.roomMarkers.push(endMarker);
                this.map.add(endMarker);
              }
              
              // 显示光缆线
              const fiberLine = this.createFiberLine(fiberData, startRoom, endRoom);
              this.fiberPolylines.push(fiberLine);
              this.map.add(fiberLine);
            }
          }
        },
        
        // 显示单个设备数据
        showEquipmentData(equipmentData) {
          console.log('显示设备数据:', equipmentData.name);
          
          if (equipmentData.machineRoomCode && equipmentData.machineRoomName) {
            // 检查是否有有效的坐标数据
            if (!this.isValidCoordinate(equipmentData.machineRoomLnglat)) {
              console.warn('设备机房缺少有效坐标，跳过显示:', equipmentData.machineRoomName);
              return;
            }
            
            const room = {
              id: equipmentData.machineRoomCode,
              name: equipmentData.machineRoomName,
              roomCode: equipmentData.machineRoomCode,
              lnglat: equipmentData.machineRoomLnglat,
              status: '在线'
            };
            
            // 显示机房
            const marker = this.createRoomMarker(room);
            this.roomMarkers.push(marker);
            this.map.add(marker);
          }
        },
        
        // 显示业务相关的机房
        showBusinessRooms(businessData) {
          console.log('显示业务机房:', businessData.name);
          
          if (businessData.children) {
            const equipmentGroup = businessData.children.find(child => child.type === 'equipment_group');
            if (equipmentGroup && equipmentGroup.children) {
              equipmentGroup.children.forEach(equipment => {
                if (equipment.machineRoomCode && equipment.machineRoomName) {
                  // 检查是否有有效的坐标数据
                  if (!this.isValidCoordinate(equipment.machineRoomLnglat)) {
                    console.warn('业务机房缺少有效坐标，跳过显示:', equipment.machineRoomName);
                    return;
                  }
                  
                  const room = {
                    id: equipment.machineRoomCode,
                    name: equipment.machineRoomName,
                    roomCode: equipment.machineRoomCode,
                    lnglat: equipment.machineRoomLnglat,
                    status: '在线',
                    businessId: businessData.id
                  };
                  
                  // 避免重复添加
                  if (!this.roomMarkers.find(marker => marker.roomCode === room.roomCode)) {
                    const marker = this.createRoomMarker(room, businessData);
                    this.roomMarkers.push(marker);
                    this.map.add(marker);
                  }
                }
              });
            }
          }
        },
        
        // 显示业务相关的光缆
        showBusinessFibers(businessData) {
          console.log('显示业务光缆:', businessData.name);
          
          if (businessData.children) {
            const fiberGroup = businessData.children.find(child => child.type === 'fiber_group');
            if (fiberGroup && fiberGroup.children) {
              fiberGroup.children.forEach(fiber => {
                if (fiber.startLocation && fiber.endLocation) {
                  const startRoom = this.findRoomByName(fiber.startLocation);
                  const endRoom = this.findRoomByName(fiber.endLocation);
                  
                  if (startRoom && endRoom && startRoom.lnglat && endRoom.lnglat) {
                    // 显示起始机房
                    if (!this.roomMarkers.find(marker => marker.roomCode === startRoom.roomCode)) {
                      const startMarker = this.createRoomMarker(startRoom);
                      this.roomMarkers.push(startMarker);
                      this.map.add(startMarker);
                    }
                    
                    // 显示结束机房
                    if (!this.roomMarkers.find(marker => marker.roomCode === endRoom.roomCode)) {
                      const endMarker = this.createRoomMarker(endRoom);
                      this.roomMarkers.push(endMarker);
                      this.map.add(endMarker);
                    }
                    
                    // 显示光缆线
                    const fiberLine = this.createFiberLine(fiber, startRoom, endRoom);
                    this.fiberPolylines.push(fiberLine);
                    this.map.add(fiberLine);
                  }
                }
              });
            }
          }
        },
        
        // 根据名称查找机房
        findRoomByName(roomName) {
          console.log('查找机房:', roomName);
          
          // 首先从真实机房数据中查找
          if (this.realMachineRooms && this.realMachineRooms.length > 0) {
            // 尝试多种匹配方式
            let room = this.realMachineRooms.find(r => 
              r.roomName === roomName || 
              r.roomName && r.roomName.includes(roomName) ||
              roomName && roomName.includes(r.roomName) ||
              r.roomCode === roomName ||
              r.deviceNumber === roomName
            );
            
            if (room) {
              console.log('在真实机房数据中找到:', room.roomName, '坐标:', room.longitude, room.latitude);
              const lnglat = room.longitude && room.latitude ? [room.longitude, room.latitude] : null;
              
              if (this.isValidCoordinate(lnglat)) {
                return {
                  id: room.roomId,
                  name: room.roomName,
                  roomCode: room.deviceNumber || room.roomId,
                  lnglat: lnglat,
                  status: room.status || '在线',
                  roomType: room.roomType,
                  address: room.address
                };
              } else {
                console.warn('真实机房坐标无效:', room.roomName, '坐标:', lnglat);
              }
            }
          }
          
          // 如果真实数据中没找到，从模拟数据中查找
          if (this.mockData && this.mockData.businesses) {
            for (let business of this.mockData.businesses) {
              if (business.children) {
                const equipmentGroup = business.children.find(child => child.type === 'equipment_group');
                if (equipmentGroup && equipmentGroup.children) {
                  const equipment = equipmentGroup.children.find(eq => eq.machineRoomName === roomName);
                  if (equipment && equipment.machineRoomCode) {
                    // 检查是否有有效的坐标数据
                    if (!this.isValidCoordinate(equipment.machineRoomLnglat)) {
                      console.warn('查找的机房缺少有效坐标，跳过:', roomName);
                      return null;
                    }
                    
                    return {
                      id: equipment.machineRoomCode,
                      name: equipment.machineRoomName,
                      roomCode: equipment.machineRoomCode,
                      lnglat: equipment.machineRoomLnglat,
                      status: '在线'
                    };
                  }
                }
              }
            }
          }
          
          console.warn('未找到机房:', roomName);
          return null;
        },
        
        // 隐藏非高亮的元素
        hideNonHighlightedElements() {
          console.log('隐藏非高亮元素，高亮机房编码:', Array.from(this.highlightedRoomCodes));
          console.log('高亮光缆编码:', Array.from(this.highlightedFiberCodes));
          
          // 隐藏非高亮的机房标记 - 遍历所有标记数组
          this.hideNonHighlightedMarkers();
          this.hideNonHighlightedFibers();
          
          // 验证过滤结果
          const stats = this.validateHighlightFilter();
          console.log(`过滤完成: 隐藏了 ${stats.hiddenRooms} 个非高亮机房，${stats.hiddenFibers} 条非高亮光缆`);
        },
        
        // 隐藏非高亮的机房标记
        hideNonHighlightedMarkers() {
          let hiddenCount = 0;
          
          // 遍历 roomMarkers 数组
          if (this.roomMarkers) {
            this.roomMarkers.forEach(marker => {
              if (marker && marker.roomCode) {
                if (!this.highlightedRoomCodes.has(marker.roomCode)) {
                  // 不是高亮的机房，隐藏
                  if (marker.setMap) {
                    marker.setMap(null);
                    hiddenCount++;
                    console.log('隐藏机房标记:', marker.roomCode);
                  }
                }
              }
            });
          }
          
          // 遍历 markers 数组（主要标记数组）
          if (this.markers) {
            this.markers.forEach(marker => {
              const extData = marker.getExtData();
              if (extData && extData.room) {
                const roomCode = extData.room.roomCode || extData.room.deviceNumber || extData.room.id;
                if (roomCode && !this.highlightedRoomCodes.has(roomCode)) {
                  // 不是高亮的机房，隐藏
                  if (marker.setMap) {
                    marker.setMap(null);
                    hiddenCount++;
                    console.log('隐藏主要机房标记:', roomCode);
                  }
                }
              }
            });
          }
          
          console.log(`隐藏了 ${hiddenCount} 个非高亮机房标记`);
        },
        
        // 隐藏非高亮的光缆线条
        hideNonHighlightedFibers() {
          let hiddenCount = 0;
          
          // 遍历 fiberPolylines 数组
          if (this.fiberPolylines) {
            this.fiberPolylines.forEach(polyline => {
              if (polyline && polyline.fiberCode) {
                if (!this.highlightedFiberCodes.has(polyline.fiberCode)) {
                  // 不是高亮的光缆，隐藏
                  if (polyline.setMap) {
                    polyline.setMap(null);
                    hiddenCount++;
                    console.log('隐藏光缆线条:', polyline.fiberCode);
                  }
                }
              }
            });
          }
          
          // 遍历 fiberLines 数组（主要光缆数组）
          if (this.fiberLines) {
            this.fiberLines.forEach(line => {
              if (line.isFiberLine && line.fiber) {
                const fiberCode = line.fiber.fiberCode || line.fiber.id;
                if (fiberCode && !this.highlightedFiberCodes.has(fiberCode)) {
                  // 不是高亮的光缆，隐藏
                  if (line.setMap) {
                    line.setMap(null);
                    hiddenCount++;
                    console.log('隐藏主要光缆线条:', fiberCode);
                  }
                }
              }
            });
          }
          
          console.log(`隐藏了 ${hiddenCount} 条非高亮光缆线条`);
        },
        
        // 验证高亮过滤结果
        validateHighlightFilter() {
          console.log('=== 验证高亮过滤结果 ===');
          
          let totalRooms = 0;
          let highlightedRooms = 0;
          let totalFibers = 0;
          let highlightedFibers = 0;
          
          // 统计机房标记
          if (this.roomMarkers) {
            this.roomMarkers.forEach(marker => {
              if (marker && marker.roomCode) {
                totalRooms++;
                if (this.highlightedRoomCodes.has(marker.roomCode)) {
                  highlightedRooms++;
                }
              }
            });
          }
          
          if (this.markers) {
            this.markers.forEach(marker => {
              const extData = marker.getExtData();
              if (extData && extData.room) {
                const roomCode = extData.room.roomCode || extData.room.deviceNumber || extData.room.id;
                if (roomCode) {
                  totalRooms++;
                  if (this.highlightedRoomCodes.has(roomCode)) {
                    highlightedRooms++;
                  }
                }
              }
            });
          }
          
          // 统计光缆线条
          if (this.fiberPolylines) {
            this.fiberPolylines.forEach(polyline => {
              if (polyline && polyline.fiberCode) {
                totalFibers++;
                if (this.highlightedFiberCodes.has(polyline.fiberCode)) {
                  highlightedFibers++;
                }
              }
            });
          }
          
          if (this.fiberLines) {
            this.fiberLines.forEach(line => {
              if (line.isFiberLine && line.fiber) {
                const fiberCode = line.fiber.fiberCode || line.fiber.id;
                if (fiberCode) {
                  totalFibers++;
                  if (this.highlightedFiberCodes.has(fiberCode)) {
                    highlightedFibers++;
                  }
                }
              }
            });
          }
          
          console.log(`机房统计: 总计 ${totalRooms} 个，高亮 ${highlightedRooms} 个，隐藏 ${totalRooms - highlightedRooms} 个`);
          console.log(`光缆统计: 总计 ${totalFibers} 条，高亮 ${highlightedFibers} 条，隐藏 ${totalFibers - highlightedFibers} 条`);
          
          return {
            totalRooms,
            highlightedRooms,
            hiddenRooms: totalRooms - highlightedRooms,
            totalFibers,
            highlightedFibers,
            hiddenFibers: totalFibers - highlightedFibers
          };
        },
        
        // 收集业务相关的机房编码
        collectBusinessRoomCodes(businessData) {
          if (businessData.children) {
            const equipmentGroup = businessData.children.find(child => child.type === 'equipment_group');
            if (equipmentGroup && equipmentGroup.children) {
              equipmentGroup.children.forEach(equipment => {
                if (equipment.machineRoomCode) {
                  this.highlightedRoomCodes.add(equipment.machineRoomCode);
                  console.log('收集机房编码:', equipment.machineRoomCode);
                }
              });
            }
          }
        },
        
        // 收集业务相关的光缆编码
        collectBusinessFiberCodes(businessData) {
          if (businessData.children) {
            const fiberGroup = businessData.children.find(child => child.type === 'fiber_group');
            if (fiberGroup && fiberGroup.children) {
              fiberGroup.children.forEach(fiber => {
                if (fiber.fiberCode || fiber.id) {
                  const fiberCode = fiber.fiberCode || fiber.id;
                  this.highlightedFiberCodes.add(fiberCode);
                  console.log('收集光缆编码:', fiberCode);
                }
              });
            }
          }
        },
        
        // 显示所有地图元素
        showAllMapElements() {
          console.log('恢复显示所有地图元素');
          
          // 使用完全恢复方法
          this.fullyRestoreAllElements();
        },
        
        // 恢复所有被隐藏的机房标记
        restoreAllRoomMarkers() {
          console.log('恢复所有被隐藏的机房标记');
          
          // 恢复 roomMarkers 数组中的标记
          if (this.roomMarkers) {
            this.roomMarkers.forEach(marker => {
              if (marker && marker.setMap) {
                // 检查标记是否已在地图上
                if (marker.getMap() === null) {
                  marker.setMap(this.map);
                  console.log('恢复机房标记:', marker.roomCode);
                }
              }
            });
          }
          
          // 恢复 markers 数组中的标记
          if (this.markers) {
            this.markers.forEach(marker => {
              if (marker && marker.setMap) {
                // 检查标记是否已在地图上
                if (marker.getMap() === null) {
                  marker.setMap(this.map);
                  const extData = marker.getExtData();
                  if (extData && extData.room) {
                    const roomCode = extData.room.roomCode || extData.room.deviceNumber || extData.room.id;
                    console.log('恢复主要机房标记:', roomCode);
                  }
                }
              }
            });
          }
        },
        
        // 恢复所有被隐藏的光缆线条
        restoreAllFiberLines() {
          console.log('恢复所有被隐藏的光缆线条');
          
          // 恢复 fiberPolylines 数组中的线条
          if (this.fiberPolylines) {
            this.fiberPolylines.forEach(polyline => {
              if (polyline && polyline.setMap) {
                // 检查线条是否已在地图上
                if (polyline.getMap() === null) {
                  polyline.setMap(this.map);
                  console.log('恢复光缆线条:', polyline.fiberCode);
                }
              }
            });
          }
          
          // 恢复 fiberLines 数组中的线条
          if (this.fiberLines) {
            this.fiberLines.forEach(line => {
              if (line && line.setMap) {
                // 检查线条是否已在地图上
                if (line.getMap() === null) {
                  line.setMap(this.map);
                  if (line.fiber) {
                    const fiberCode = line.fiber.fiberCode || line.fiber.id;
                    console.log('恢复主要光缆线条:', fiberCode);
                  }
                }
              }
            });
          }
        },
        
        // 完全恢复所有地图元素（用于取消选择菜单时）
        fullyRestoreAllElements() {
          console.log('完全恢复所有地图元素...');
          
          // 1. 恢复所有被隐藏的机房标记
          this.restoreAllRoomMarkers();
          
          // 2. 恢复所有被隐藏的光缆线条
          this.restoreAllFiberLines();
          
          // 3. 重新渲染所有机房（确保没有遗漏）
          this.renderAllRooms();
          
          // 4. 重新渲染所有光缆（确保没有遗漏）
          this.renderAllFibers();
          
          // 5. 验证恢复结果
          const stats = this.validateRestoreResult();
          console.log(`恢复完成: 显示 ${stats.visibleRooms} 个机房，${stats.visibleFibers} 条光缆`);
        },
        
        // 验证恢复结果
        validateRestoreResult() {
          let visibleRooms = 0;
          let visibleFibers = 0;
          
          // 统计可见的机房标记
          if (this.roomMarkers) {
            this.roomMarkers.forEach(marker => {
              if (marker && marker.getMap && marker.getMap() !== null) {
                visibleRooms++;
              }
            });
          }
          
          if (this.markers) {
            this.markers.forEach(marker => {
              if (marker && marker.getMap && marker.getMap() !== null) {
                visibleRooms++;
              }
            });
          }
          
          // 统计可见的光缆线条
          if (this.fiberPolylines) {
            this.fiberPolylines.forEach(polyline => {
              if (polyline && polyline.getMap && polyline.getMap() !== null) {
                visibleFibers++;
              }
            });
          }
          
          if (this.fiberLines) {
            this.fiberLines.forEach(line => {
              if (line && line.getMap && line.getMap() !== null) {
                visibleFibers++;
              }
            });
          }
          
          return { visibleRooms, visibleFibers };
        },
        
        // 渲染所有机房
        renderAllRooms() {
          console.log('开始渲染所有机房...');
          
          // 优先使用真实机房数据
          if (this.realMachineRooms && this.realMachineRooms.length > 0) {
            console.log('使用真实机房数据，共', this.realMachineRooms.length, '个机房');
            this.realMachineRooms.forEach(room => {
              // 处理真实数据的坐标格式 (longitude, latitude)
              const lnglat = room.longitude && room.latitude ? [room.longitude, room.latitude] : room.lnglat;
              
              // 严格验证坐标数据
              if (this.isValidCoordinate(lnglat)) {
                try {
                  // 创建包含正确坐标的机房对象
                  const roomWithCoords = {
                    ...room,
                    lnglat: lnglat,
                    name: room.roomName || room.name,
                    roomType: room.roomType,
                    roomCode: room.deviceNumber || room.roomId,
                    companyName: room.companyName,
                    level: room.level
                  };
                  
                  const marker = this.createRoomMarker(roomWithCoords, null);
                  if (marker) { // 检查标记是否应该显示
                    this.roomMarkers.push(marker);
                    this.map.add(marker);
                    console.log('成功渲染真实机房:', room.roomName, '坐标:', lnglat, 'roomType:', room.roomType);
                  } else {
                    console.log('真实机房被过滤:', room.roomName, 'roomType:', room.roomType, '(缩放级别不匹配)');
                  }
                } catch (error) {
                  console.error('创建真实机房标记失败:', room.roomName, error);
                }
              } else {
                console.warn('真实机房缺少有效坐标，跳过渲染:', room.roomName, '坐标:', lnglat);
              }
            });
          }
          // 如果没有真实数据，使用模拟数据
          else if (this.mockData && this.mockData.rooms) {
            console.log('使用模拟机房数据，共', this.mockData.rooms.length, '个机房');
            this.mockData.rooms.forEach(room => {
              // 严格验证坐标数据
              if (this.isValidCoordinate(room.lnglat)) {
                try {
                  const marker = this.createRoomMarker(room);
                  this.roomMarkers.push(marker);
                  this.map.add(marker);
                  console.log('成功渲染模拟机房:', room.name, '坐标:', room.lnglat);
                } catch (error) {
                  console.error('创建模拟机房标记失败:', room.name, error);
                }
              } else {
                console.warn('模拟机房缺少有效坐标，跳过渲染:', room.name, '坐标:', room.lnglat);
              }
            });
          } else {
            console.warn('没有可用的机房数据');
          }
        },
        
        // 渲染所有光缆
        renderAllFibers() {
          console.log('开始渲染所有光缆...');
          
          // 优先使用真实光缆数据
          if (this.realOptFibs && this.realOptFibs.length > 0) {
            console.log('使用真实光缆数据，共', this.realOptFibs.length, '条光缆');
            console.log('光缆数据示例:', this.realOptFibs[0]);
            this.realOptFibs.forEach(fiber => {
              // 使用正确的字段名：startMachineRoomCode 和 endMachineRoomCode
              const startRoomCode = fiber.startMachineRoomCode || fiber.startLocation;
              const endRoomCode = fiber.endMachineRoomCode || fiber.endLocation;
              
              console.log('处理光缆:', fiber.fiberName, '起始机房编码:', startRoomCode, '结束机房编码:', endRoomCode);
              
              if (startRoomCode && endRoomCode) {
                const startRoom = this.findRoomByCode(startRoomCode) || this.findRoomByName(startRoomCode);
                const endRoom = this.findRoomByCode(endRoomCode) || this.findRoomByName(endRoomCode);
                
                if (startRoom && endRoom && startRoom.lnglat && endRoom.lnglat) {
                  // 验证坐标有效性
                  if (this.isValidCoordinate(startRoom.lnglat) && this.isValidCoordinate(endRoom.lnglat)) {
                    try {
                      const fiberLine = this.createFiberLine(fiber, startRoom, endRoom);
                      this.fiberPolylines.push(fiberLine);
                      this.map.add(fiberLine);
                      console.log('成功渲染真实光缆:', fiber.fiberName, '从', startRoom.name, '到', endRoom.name);
                    } catch (error) {
                      console.error('创建真实光缆线条失败:', fiber.fiberName, error);
                    }
                  } else {
                    console.warn('真实光缆起始或结束机房坐标无效，跳过渲染:', fiber.fiberName);
                  }
                } else {
                  console.warn('真实光缆起始或结束机房未找到，跳过渲染:', fiber.fiberName);
                }
              }
            });
          }
          // 如果没有真实数据，使用模拟数据
          else if (this.mockData && this.mockData.fibers) {
            console.log('使用模拟光缆数据，共', this.mockData.fibers.length, '条光缆');
            this.mockData.fibers.forEach(fiber => {
              if (fiber.startLocation && fiber.endLocation) {
                const startRoom = this.findRoomByName(fiber.startLocation);
                const endRoom = this.findRoomByName(fiber.endLocation);
                
                if (startRoom && endRoom && startRoom.lnglat && endRoom.lnglat) {
                  // 验证坐标有效性
                  if (this.isValidCoordinate(startRoom.lnglat) && this.isValidCoordinate(endRoom.lnglat)) {
                    try {
                      const fiberLine = this.createFiberLine(fiber, startRoom, endRoom);
                      this.fiberPolylines.push(fiberLine);
                      this.map.add(fiberLine);
                      console.log('成功渲染模拟光缆:', fiber.fiberName, '从', startRoom.name, '到', endRoom.name);
                    } catch (error) {
                      console.error('创建模拟光缆线条失败:', fiber.fiberName, error);
                    }
                  } else {
                    console.warn('模拟光缆起始或结束机房坐标无效，跳过渲染:', fiber.fiberName);
                  }
                } else {
                  console.warn('模拟光缆起始或结束机房未找到，跳过渲染:', fiber.fiberName);
                }
              }
            });
          } else {
            console.warn('没有可用的光缆数据');
          }
        },
        
        // 验证坐标是否有效
        isValidCoordinate(lnglat) {
          if (!lnglat || !Array.isArray(lnglat) || lnglat.length !== 2) {
            return false;
          }
          
          const [lng, lat] = lnglat;
          
          // 检查是否为数字
          if (isNaN(lng) || isNaN(lat)) {
            return false;
          }
          
          // 检查坐标范围（中国境内大致范围）
          if (lng < 70 || lng > 140 || lat < 10 || lat > 60) {
            return false;
          }
          
          // 检查是否为0坐标
          if (lng === 0 && lat === 0) {
            return false;
          }
          
          return true;
        },
        
        // 更新菜单选中状态
        updateMenuSelection(menuId, isSelected) {
          this.updateMenuSelectionRecursive(this.orderMenuData, menuId, isSelected);
        },
        
        // 递归更新菜单选中状态
        updateMenuSelectionRecursive(menuData, menuId, isSelected) {
          menuData.forEach(item => {
            if (item.id === menuId) {
              item.isSelected = isSelected;
            }
            if (item.children && item.children.length > 0) {
              this.updateMenuSelectionRecursive(item.children, menuId, isSelected);
            }
          });
        },
        
        // 清除所有菜单选中状态
        clearAllMenuSelection() {
          this.clearMenuSelectionRecursive(this.orderMenuData);
        },
        
        // 递归清除菜单选中状态
        clearMenuSelectionRecursive(menuData) {
          menuData.forEach(item => {
            item.isSelected = false;
            if (item.children && item.children.length > 0) {
              this.clearMenuSelectionRecursive(item.children);
            }
          });
        },
        
        // 清除菜单高亮的元素
        clearMenuHighlightedElements() {
          // 清除机房标记高亮
          this.clearMarkerHighlight();
          // 清除光缆线高亮
          this.clearFiberHighlight();
        },
        
        // 清除所有高亮（但保留菜单高亮）
        clearAllHighlights() {
          // 只清除非菜单高亮
          if (!this.menuHighlightState.isMenuHighlightActive) {
            this.clearFiberHighlight();
            this.clearMarkerHighlight();
          }
        },
        
        // 清除所有高亮（包括菜单高亮）
        clearAllHighlightsIncludingMenu() {
          // 直接清除所有高亮，不检查菜单状态
          this.clearAllFiberHighlight();
          this.clearAllMarkerHighlight();
        },
        
        // 清除所有光缆线高亮（不检查菜单状态）
        clearAllFiberHighlight() {
          this.fiberLines.forEach(line => {
            if (line.isFiberLine) {
              line.isHighlighted = false;
              line.setOptions({
                strokeWeight: 3,
                strokeOpacity: 0.8,
                strokeColor: '#00ff00', // 恢复原始绿色
                strokeStyle: 'solid',
                lineJoin: 'round',
                lineCap: 'round'
              });
            }
          });
        },
        
        // 清除所有标记高亮（不检查菜单状态）
        clearAllMarkerHighlight() {
          this.markers.forEach(marker => {
            const content = marker.getContent();
            if (content) {
              // 直接移除所有高亮CSS类
              content.classList.remove('highlighted-marker', 'search-highlight', 'marker-hover');
            }
          });
        },
        
        // 高亮客户的所有业务的所有机房和光缆
        highlightCustomerAll(customerData) {
          console.log('高亮客户所有内容:', customerData.name);
          
          if (customerData.children && customerData.children.length > 0) {
            customerData.children.forEach(business => {
              this.highlightBusinessAll(business);
            });
          }
        },
        
        // 高亮业务的所有光缆和机房
        highlightBusinessAll(businessData) {
          console.log('高亮业务所有内容:', businessData.name);
          
          // 收集业务相关的机房编码
          this.collectBusinessRoomCodes(businessData);
          
          // 收集业务相关的光缆编码
          this.collectBusinessFiberCodes(businessData);
          
          // 高亮光缆
          if (businessData.children) {
            const fiberGroup = businessData.children.find(child => child.type === 'fiber_group');
            if (fiberGroup) {
              this.highlightFiberGroup(fiberGroup);
            }
            
            // 高亮机房（通过设备组）
            const equipmentGroup = businessData.children.find(child => child.type === 'equipment_group');
            if (equipmentGroup) {
              this.highlightEquipmentGroup(equipmentGroup);
            }
          }
        },
        
        // 高亮光缆组的所有光缆
        highlightFiberGroup(fiberGroupData) {
          console.log('高亮光缆组:', fiberGroupData.name);
          
          // 收集光缆组中的光缆编码
          if (fiberGroupData.children && fiberGroupData.children.length > 0) {
            fiberGroupData.children.forEach(fiber => {
              if (fiber.fiberCode || fiber.id) {
                const fiberCode = fiber.fiberCode || fiber.id;
                this.highlightedFiberCodes.add(fiberCode);
                console.log('收集光缆组光缆编码:', fiberCode);
              }
            });
          }
          
          if (fiberGroupData.children && fiberGroupData.children.length > 0) {
            const fiberLines = [];
            fiberGroupData.children.forEach(fiber => {
              const fiberLine = this.fiberLines.find(line => 
                line.fiber && line.fiber.fiberName === fiber.name
              );
              if (fiberLine) {
                fiberLines.push(fiberLine);
              }
            });
            
            if (fiberLines.length > 0) {
              this.highlightMultipleFiberLinesWithoutViewAdjust(fiberLines);
              // 记录高亮的元素
              this.menuHighlightState.highlightedElements = fiberLines;
            }
          }
        },
        
        // 高亮设备组的所有机房
        highlightEquipmentGroup(equipmentGroupData) {
          console.log('高亮设备组:', equipmentGroupData.name);
          
          if (equipmentGroupData.children && equipmentGroupData.children.length > 0) {
            const roomCodes = new Set();
            const roomNames = new Set();
            
            equipmentGroupData.children.forEach(equipment => {
              // 优先收集机房编码
              if (equipment.machineRoomCode) {
                roomCodes.add(equipment.machineRoomCode);
                // 同时添加到高亮编码集合
                this.highlightedRoomCodes.add(equipment.machineRoomCode);
                console.log('收集设备组机房编码:', equipment.machineRoomCode);
              } else if (equipment.machineRoomName) {
                // 如果没有机房编码，则收集机房名称
                roomNames.add(equipment.machineRoomName);
              }
            });
            
            // 优先使用机房编码进行高亮
            if (roomCodes.size > 0) {
              roomCodes.forEach(roomCode => {
                this.highlightMarkersByRoomCodeWithoutViewAdjust(roomCode);
              });
              // 记录高亮的元素
              this.menuHighlightState.highlightedElements = Array.from(roomCodes);
            } else if (roomNames.size > 0) {
              // 如果没有机房编码，则使用机房名称
              this.highlightMarkersByRoomNamesWithoutViewAdjust(Array.from(roomNames));
              // 记录高亮的元素
              this.menuHighlightState.highlightedElements = Array.from(roomNames);
            }
          }
        },
        
        // 高亮具体光缆
        highlightSpecificFiber(fiberData) {
          console.log('高亮具体光缆:', fiberData.name);
          
          // 根据光缆名称查找对应的光缆线
          const fiberLine = this.fiberLines.find(line => 
            line.fiber && line.fiber.fiberName === fiberData.name
          );
          
          if (fiberLine) {
            // 清除之前的光缆高亮
            this.clearFiberHighlight();
            
            // 高亮当前光缆线
            this.highlightFiberLine(fiberLine);
            
            // 显示光缆信息卡片
            this.showFiberInfo(fiberLine);
            
            // 显示成功消息
            ElMessage.success(`已选中光缆: ${fiberLine.fiber.fiberName}`);
          } else {
            console.warn('未找到对应的光缆线:', fiberData.name);
            //ElMessage.warning(`未找到光缆: ${fiberData.name}`);
          }
        },
        
        // 高亮设备所在机房（模拟直接点击机房节点）
        async highlightEquipmentRoom(equipmentData) {
          console.log('菜单点击设备 - 完整设备数据:', equipmentData);
          
          const roomCode = equipmentData.machineRoomCode;
          if (roomCode) {
            this.renderByRoomCode(roomCode); // 调用统一函数
          } else if (equipmentData.machineRoomName) {
            // 如果没有code，使用名称查找（备用）
            console.log('设备缺少code，使用名称查找:', equipmentData.machineRoomName);
            //ElMessage.warning('设备缺少机房编码，使用名称查找可能不精准');
            // 可选：实现基于名称的渲染
          } else {
            ElMessage.warning('设备缺少机房信息');
          }
        },
        
        // 统一渲染函数 - 根据roomCode锁定机房并渲染UI
        async renderByRoomCode(roomCode) {
          console.log('统一渲染 - 机房编码:', roomCode);
          
          // 步骤1: 完全清除所有高亮状态，确保一致性
          this.clearMenuHighlight();
          this.clearAllMarkerHighlight();
          this.clearAllHighlightsIncludingMenu();
          
          // 步骤2: 查找机房对象
          let room = this.realMachineRooms.find(r => r.roomCode === roomCode);
          if (!room && this.businessData && Array.isArray(this.businessData)) {
            const businessWithRoom = this.businessData.find(b => b.children && Array.isArray(b.children) && b.children.some(r => r.roomCode === roomCode));
            if (businessWithRoom) {
              room = businessWithRoom.children.find(r => r.roomCode === roomCode);
            }
          }
          
          if (!room) {
            console.warn('未找到机房:', roomCode);
            //ElMessage.warning(`未找到机房: ${roomCode}`);
            return;
          }
          
          // 步骤3: 高亮节点
          this.highlightMarkersByRoomCode(roomCode);
          
          // 步骤4: 打开信息卡片
          this.closeAllCards(false);
              await this.selectRoom(room, null);
              
          // 步骤5: 显示消息和定位
              ElMessage.success(`已选中机房: ${room.name}`);
          this.precisePositionToRoom(room); // 居中定位
        },
        
        // 高亮单个机房标记
        highlightSingleMarkerByRoom(room) {
          console.log('高亮单个机房标记:', room.name, '机房编码:', room.roomCode);
          
          const highlightedMarkers = [];
          this.markers.forEach((marker, index) => {
            const extData = marker.getExtData();
            if (extData && extData.room) {
              const markerRoomCode = extData.room.roomCode || extData.room.deviceNumber || extData.room.id;
              const markerRoomName = extData.room.name;
              
              // 优先使用机房编码匹配，如果没有编码则使用名称匹配
              if ((room.roomCode && markerRoomCode === room.roomCode) || 
                  (!room.roomCode && markerRoomName === room.name)) {
                console.log(`找到匹配的标记${index}:`, extData.room.name);
                const content = marker.getContent();
                if (content) {
                  // 添加高亮CSS类
                  content.classList.add('highlighted-marker');
                  console.log('已添加高亮CSS类');
                }
                highlightedMarkers.push(marker);
              }
            }
          });
          
          console.log('高亮的标记数量:', highlightedMarkers.length);
          
          if (highlightedMarkers.length === 0) {
            console.warn('未找到机房', room.name, '的标记');
          }
        },
        
        // 根据机房编码高亮标记
        highlightMarkersByRoomCode(roomCode) {
          console.log('根据机房编码高亮标记:', roomCode);
          console.log('当前标记数量:', this.markers.length);
          
          const highlightedMarkers = [];
          this.markers.forEach((marker, index) => {
            const extData = marker.getExtData();
            console.log(`标记${index}的extData:`, extData);
            if (extData && extData.room) {
              const markerRoomCode = extData.room.roomCode || extData.room.deviceNumber || extData.room.id;
              console.log(`标记${index}的机房编码:`, markerRoomCode, '目标编码:', roomCode);
              if (markerRoomCode === roomCode) {
                console.log(`找到匹配的标记${index}:`, extData.room.name);
                const content = marker.getContent();
                if (content) {
                  // 添加高亮CSS类
                  content.classList.add('highlighted-marker');
                  console.log('已添加高亮CSS类 - highlighted-marker');
                  
                  // 验证CSS类是否添加成功
                  if (content.classList.contains('highlighted-marker')) {
                    console.log('✅ CSS类添加成功，标记应该显示红色高亮');
                  } else {
                    console.error('❌ CSS类添加失败');
                  }
                } else {
                  console.error('❌ 无法获取标记内容');
                }
                highlightedMarkers.push(marker);
              }
            }
          });
          
          console.log('高亮的标记数量:', highlightedMarkers.length);
          
          // 自动调整地图视图以显示所有高亮的标记
          if (highlightedMarkers.length > 0) {
            this.adjustMapViewToMarkers(highlightedMarkers);
            console.log('✅ 标记高亮完成，应该显示红色效果');
          } else {
            console.warn('❌ 未找到机房编码为', roomCode, '的机房标记');
          }
        },
        
        // 根据机房编码高亮标记（不调整地图视图）
        highlightMarkersByRoomCodeWithoutViewAdjust(roomCode) {
          console.log('根据机房编码高亮标记（不调整视图）:', roomCode);
          
          const highlightedMarkers = [];
          this.markers.forEach(marker => {
            const extData = marker.getExtData();
            if (extData && extData.room) {
              const markerRoomCode = extData.room.roomCode || extData.room.deviceNumber || extData.room.id;
              if (markerRoomCode === roomCode) {
                const content = marker.getContent();
                if (content) {
                  // 添加高亮CSS类
                  content.classList.add('highlighted-marker');
                }
                highlightedMarkers.push(marker);
              }
            }
          });
          
          if (highlightedMarkers.length === 0) {
            console.warn('未找到机房编码为', roomCode, '的机房标记');
          }
        },
        
        // 根据机房名称高亮标记
        highlightMarkersByRoomNames(roomNames) {
          console.log('根据机房名称高亮标记:', roomNames);
          
          const highlightedMarkers = [];
          this.markers.forEach(marker => {
            const extData = marker.getExtData();
            if (extData && extData.room) {
              const roomName = extData.room.name || extData.room.roomName;
              if (roomNames.includes(roomName)) {
                const content = marker.getContent();
                if (content) {
                  // 添加高亮CSS类
                  content.classList.add('highlighted-marker');
                }
                highlightedMarkers.push(marker);
              }
            }
          });
          
          // 自动调整地图视图以显示所有高亮的标记
          if (highlightedMarkers.length > 0) {
            this.adjustMapViewToMarkers(highlightedMarkers);
          }
        },
        
        // 根据机房名称高亮标记（不调整地图视图）
        highlightMarkersByRoomNamesWithoutViewAdjust(roomNames) {
          console.log('根据机房名称高亮标记（不调整视图）:', roomNames);
          
          const highlightedMarkers = [];
          this.markers.forEach(marker => {
            const extData = marker.getExtData();
            if (extData && extData.room) {
              const roomName = extData.room.name || extData.room.roomName;
              if (roomNames.includes(roomName)) {
                const content = marker.getContent();
                if (content) {
                  // 添加高亮CSS类
                  content.classList.add('highlighted-marker');
                }
                highlightedMarkers.push(marker);
              }
            }
          });
        },
        
        // 调整地图视图以显示指定的标记
        adjustMapViewToMarkers(markers) {
          if (!this.map || markers.length === 0) return;
          
          try {
            if (markers.length === 1) {
              // 单个标记，居中显示
              const marker = markers[0];
              const position = marker.getPosition();
              this.map.setCenter(position);
              this.map.setZoom(12);
            } else {
              // 多个标记，调整视图包含所有标记
              const positions = markers.map(marker => marker.getPosition()).filter(pos => pos);
              if (positions.length > 0) {
                this.map.setFitView(positions, false, [50, 50, 50, 50]);
              }
            }
          } catch (error) {
            console.warn('调整地图视图失败:', error);
          }
        },
        
        findBusinessByRoom(room) {
          // 返回第一个找到的业务（为了保持兼容性）
          for (let business of this.businessData) {
            for (let child of business.children) {
              if (child.id === room.id || child.name === room.name || 
                  (child.roomCode && child.roomCode === room.roomCode)) {
                return business;
              }
            }
          }
          return null;
        },
        
        // 查找点击位置附近的机房节点
        findNearbyRoom(clickLnglat) {
          const clickTolerance = 0.01; // 约1公里的容差范围
          let closestRoom = null;
          let minDistance = Infinity;
          
          // 遍历所有业务线的机房
          this.businessData.forEach(business => {
            business.children.forEach(room => {
              if (room.lnglat && room.lnglat.length === 2) {
                const distance = this.calculateDistance(clickLnglat, {
                  lng: room.lnglat[0],
                  lat: room.lnglat[1]
                });
                
                if (distance < clickTolerance && distance < minDistance) {
                  minDistance = distance;
                  closestRoom = room;
                }
              }
            });
          });
          
          return closestRoom;
        },
        
        // 计算两点之间的距离（简化计算）
        calculateDistance(lnglat1, lnglat2) {
          const lngDiff = lnglat1.lng - lnglat2.lng;
          const latDiff = lnglat1.lat - lnglat2.lat;
          return Math.sqrt(lngDiff * lngDiff + latDiff * latDiff);
        },
        
        clearHighlight(nodes) {
          nodes.forEach(node => {
            node.highlight = false;
            if (node.children) {
              this.clearHighlight(node.children);
            }
          });
        },
        
        expandAllNodes(business) {
          // 展开树节点
          this.$nextTick(() => {
            const tree = this.$refs.treeRef;
            if (tree) {
              tree.store.nodesMap[business.id].expand();
              business.children.forEach(child => {
                tree.store.nodesMap[child.id].expand();
              });
            }
          });
        },
        
        getNodeIcon(type) {
          const iconMap = {
            business: 'Grid',
            room: 'OfficeBuilding',
            device: 'Monitor',
            board: 'Coin',
            port: 'Connection'
          };
          return iconMap[type] || 'Grid';
        },
        
        // 获取订单节点图标
        getOrderNodeIcon(type) {
          const iconMap = {
            customer: 'OfficeBuilding',
            business: 'Grid',
            fiber_group: 'Connection',
            equipment_group: 'Monitor',
            fiber: 'Connection',
            equipment: 'Coin'
          };
          return iconMap[type] || 'Grid';
        },
        
        getNodeTypeTag(type) {
          const tagMap = {
            business: 'primary',
            room: 'success',
            device: 'warning',
            board: 'info',
            port: 'info'
          };
          return tagMap[type] || 'info';
        },
        
        getNodeTypeLabel(type) {
          const labelMap = {
            business: '业务线',
            room: '机房',
            device: '设备',
            board: '单板',
            port: '端口'
          };
          return labelMap[type] || type;
        },
        
        getStatusClass(status) {
          return {
            'status-online': status === '在线',
            'status-warning': status === '警告',
            'status-offline': status === '离线'
          };
        },
        
        getStatusColor(status) {
          // 统一使用蓝色，不根据状态变化
          return '#409eff';
        },
        
        async refreshData() {
          console.log('刷新数据...');
          ElMessage.info('正在刷新数据...');
          await this.loadRealData();
        },
        
        // 地图工具栏方法
        setMapCenter() {
          this.map.setCenter([115.892151, 28.676493]); // 南昌坐标
          this.map.setZoom(6);
         // ElMessage.success('地图中心已重置为南昌');
        },
        
        toggleMapLayer() {
          // 轮询切换图层状态：1 -> 2 -> 3 -> 1
          this.currentMapLayer = this.currentMapLayer === 3 ? 1 : this.currentMapLayer + 1;
          
          console.log('切换地图图层到状态:', this.currentMapLayer);
          
          try {
            // 移除所有之前的图层
            this.removeAllLayers();
            
            // 根据图层状态进行不同的处理
            if (this.currentMapLayer === 2) {
              // 状态2：卫星图层
              this.map.setMapStyle('amap://styles/satellite');
              
              // 添加卫星图层和路网图层
              const satelliteLayer = new AMap.TileLayer.Satellite({
                zIndex: 1
              });
              const roadNetLayer = new AMap.TileLayer.RoadNet({
                zIndex: 2
              });
              this.map.add(satelliteLayer);
              this.map.add(roadNetLayer);
              
              // 存储到当前图层数组
              this.currentLayers = [satelliteLayer, roadNetLayer];
            } else if (this.currentMapLayer === 3) {
              // 状态3：深色图层
              this.map.setMapStyle('amap://styles/dark');
              this.currentLayers = [];
            } else {
              // 状态1：标准图层
              this.map.setMapStyle('amap://styles/normal');
              this.currentLayers = [];
            }
            
            // 重新添加标记
            this.addMarkersToMap();
            
            // 根据当前光缆线显示状态决定是否显示光缆线
            if (this.showFiberLines) {
              this.addFiberLinesToMap();
            }
            
            ElMessage.success(`已切换到${this.getLayerName(this.currentMapLayer)}图层`);
            console.log('地图图层切换成功');
          } catch (error) {
            console.error('地图图层切换失败:', error);
            ElMessage.error('地图图层切换失败，请重试');
            // 发生错误时恢复到标准图层
            this.currentMapLayer = 1;
            this.removeAllLayers();
            this.map.setMapStyle('amap://styles/normal');
          }
        },
        
        // 移除所有图层的辅助方法
        removeAllLayers() {
          console.log('移除所有图层，当前图层数量:', this.currentLayers ? this.currentLayers.length : 0);
          
          // 移除所有当前图层
          if (this.currentLayers && this.currentLayers.length > 0) {
            this.currentLayers.forEach(layer => {
              try {
                this.map.remove(layer);
              } catch (error) {
                console.warn('移除图层失败:', error);
              }
            });
          }
          
          // 清空图层数组
          this.currentLayers = [];
          
          // 注意：不要调用 clearMap()，因为它会清除所有地图元素包括标记和业务线
          // 我们只需要移除图层，保留标记和业务线
          
          console.log('所有图层已移除');
        },
        
        getLayerName(layerState) {
          const names = {
            1: '标准',
            2: '卫星',
            3: '深色'
          };
          return names[layerState] || '标准';
        },
        
        // 切换光缆线显示
        toggleFiberLines() {
          this.showFiberLines = !this.showFiberLines;
          
          if (this.showFiberLines) {
            // 显示光缆线
            this.addFiberLinesToMap();
           // ElMessage.success('已显示光缆线');
          } else {
            // 隐藏光缆线
            this.clearFiberLines();
           // ElMessage.success('已隐藏光缆线');
          }
        },
        
        // 添加光缆线到地图
        addFiberLinesToMap() {
          console.log('开始添加光缆线到地图...');
          
          if (!this.map) {
            console.warn('地图未初始化，跳过光缆线添加');
            return;
          }
          
          // 如果光缆线显示状态为关闭，则不添加
          if (!this.showFiberLines) {
            console.log('光缆线显示状态为关闭，跳过添加');
            return;
          }
          
          this.clearFiberLines();
          
          let fiberCount = 0;
          console.log(`开始处理 ${this.realOptFibs.length} 条光缆数据`);
          
          this.realOptFibs.forEach(fiber => {
            // 根据起点和终点机房编码查找对应的机房
            const startRoom = this.findRoomByCode(fiber.startMachineRoomCode);
            const endRoom = this.findRoomByCode(fiber.endMachineRoomCode);
            
            if (startRoom && endRoom && startRoom.lnglat && endRoom.lnglat) {
              try {
                const fiberLine = this.createFiberLine(fiber, startRoom, endRoom);
                this.fiberLines.push(fiberLine);
                this.map.add(fiberLine);
                fiberCount++;
                console.log(`添加光缆线: ${fiber.fiberName} 从 ${startRoom.name} 到 ${endRoom.name}`);
              } catch (error) {
                console.error(`创建光缆线失败 - ${fiber.fiberName}:`, error);
              }
            } else {
              console.warn(`光缆 ${fiber.fiberName} 缺少有效的起点或终点机房坐标`);
            }
          });
          
          console.log(`成功添加 ${fiberCount} 条光缆线`);
          
          if (fiberCount > 0) {
            // ElMessage.success(`已在地图上显示 ${fiberCount} 条光缆线`);
          } else {
            //ElMessage.warning('没有找到可显示的光缆线，请检查光缆数据中的机房编码');
          }
        },
        
        // 根据机房编码查找机房
        findRoomByCode(roomCode) {
          if (!roomCode) return null;
          
          console.log('根据编码查找机房:', roomCode);
          
          // 在真实机房数据中查找
          let room = this.realMachineRooms.find(r => 
            r.deviceNumber === roomCode || 
            r.roomId === roomCode ||
            r.roomCode === roomCode ||
            (r.roomName && r.roomName.includes(roomCode)) ||
            (roomCode && roomCode.includes(r.roomName))
          );
          
          if (room) {
            return {
              id: room.roomId,
              name: room.roomName || '未命名机房',
              lnglat: room.longitude && room.latitude ? [room.longitude, room.latitude] : null,
              address: room.address,
              city: this.extractCityFromAddress(room.address),
              roomType: room.roomType,
              roomCode: room.deviceNumber || room.roomId,
              companyName: room.companyName,
              level: room.level,
              status: room.status
            };
          }
          
          // 在业务数据中查找
          for (let business of this.businessData) {
            for (let child of business.children) {
              if (child.roomCode === roomCode || child.id === roomCode) {
                return child;
              }
            }
          }
          
          return null;
        },
        
        // 创建光缆线
        createFiberLine(fiber, startRoom, endRoom) {
          const fiberLine = new AMap.Polyline({
            path: [
              new AMap.LngLat(startRoom.lnglat[0], startRoom.lnglat[1]),
              new AMap.LngLat(endRoom.lnglat[0], endRoom.lnglat[1])
            ],
              strokeColor: '#00ff00', // 绿色光缆线
            strokeWeight: 3,
            strokeOpacity: 0.8,
            strokeStyle: 'solid',
            lineJoin: 'round',
            lineCap: 'round',
            cursor: 'pointer',
            zIndex: 100 // 普通光缆线层级
          });
          
          // 添加光缆数据
          fiberLine.fiber = fiber;
          fiberLine.startRoom = startRoom;
          fiberLine.endRoom = endRoom;
          fiberLine.isFiberLine = true;
          
          // 保存光缆编码用于后续过滤
          fiberLine.fiberCode = fiber.fiberCode || fiber.id;
          
          // 添加点击事件
          fiberLine.on('click', (e) => {
            this.handleFiberLineClick(fiberLine, e);
          });
          
          // 添加悬停事件
          fiberLine.on('mouseover', () => {
            if (!fiberLine.isHighlighted) {
              fiberLine.setOptions({
                strokeWeight: 5,
                strokeOpacity: 1
              });
            }
          });
          
          fiberLine.on('mouseout', () => {
            if (!fiberLine.isHighlighted) {
              fiberLine.setOptions({
                strokeWeight: 3,
                strokeOpacity: 0.8
              });
            }
          });
          
          return fiberLine;
        },
        
        // 处理光缆线点击事件
        handleFiberLineClick(fiberLine, event) {
          console.log('点击光缆线:', fiberLine.fiber.fiberName);
          
          // 清空菜单选取状态，避免干扰
          this.clearMenuHighlight();
          
          // 清除之前的高亮
          this.clearFiberHighlight();
          
          // 高亮当前光缆线
          this.highlightFiberLine(fiberLine);
          
          // 显示光缆信息面板
          this.showFiberInfo(fiberLine);
          
          // 显示成功消息
          // ElMessage.success(`已选中光缆: ${fiberLine.fiber.fiberName}`);
        },
        
        // 高亮光缆线
        highlightFiberLine(fiberLine) {
          if (fiberLine && fiberLine.setOptions) {
            fiberLine.isHighlighted = true;
            fiberLine.setOptions({
              strokeWeight: 8,
              strokeOpacity: 1,
              strokeColor: '#ff0000', // 红色高亮
              strokeStyle: 'solid',
              lineJoin: 'round',
              lineCap: 'round',
              zIndex: 200 // 高亮光缆线层级
            });
          }
        },
        
        // 高亮多条光缆线
        highlightMultipleFiberLines(fiberLines) {
          console.log('高亮多条光缆线:', fiberLines.length);
          fiberLines.forEach(line => {
            this.highlightFiberLine(line);
          });
          
          // 调整地图视图以显示所有高亮的光缆线
          this.adjustMapViewToFiberLines(fiberLines);
        },
        
        // 高亮多条光缆线（不调整地图视图）
        highlightMultipleFiberLinesWithoutViewAdjust(fiberLines) {
          console.log('高亮多条光缆线（不调整视图）:', fiberLines.length);
          fiberLines.forEach(line => {
            this.highlightFiberLine(line);
          });
        },
        
        // 调整地图视图以显示光缆线
        adjustMapViewToFiberLines(fiberLines) {
          if (!this.map || fiberLines.length === 0) return;
          
          try {
            const positions = [];
            fiberLines.forEach(line => {
              if (line.getPath && line.getPath()) {
                const path = line.getPath();
                if (Array.isArray(path)) {
                  positions.push(...path);
                } else if (path.getArray) {
                  positions.push(...path.getArray());
                }
              }
            });
            
            if (positions.length > 0) {
              // 去重并过滤有效位置
              const uniquePositions = positions.filter((pos, index, self) => 
                pos && pos.lng && pos.lat && 
                self.findIndex(p => p.lng === pos.lng && p.lat === pos.lat) === index
              );
              
              if (uniquePositions.length > 0) {
                this.map.setFitView(uniquePositions, false, [50, 50, 50, 50]);
              }
            }
          } catch (error) {
            console.warn('调整地图视图到光缆线失败:', error);
          }
        },
        
        // 清除光缆线高亮
        clearFiberHighlight() {
          this.fiberLines.forEach(line => {
            if (line.isFiberLine) {
              // 检查是否是菜单高亮的元素
              const isMenuHighlighted = this.menuHighlightState.isMenuHighlightActive && 
                                      this.menuHighlightState.highlightedElements.includes(line);
              
              if (!isMenuHighlighted) {
                line.isHighlighted = false;
                line.setOptions({
                  strokeWeight: 3,
                  strokeOpacity: 0.8,
                  strokeColor: '#00ff00', // 恢复原始绿色
                  strokeStyle: 'solid',
                  lineJoin: 'round',
                  lineCap: 'round'
                });
              }
            }
          });
        },
        
        // 显示光缆信息
        showFiberInfo(fiberLine) {
          // 存储当前选中的光缆线，触发左侧卡片显示
          this.selectedFiber = fiberLine;
        },
        
        // 关闭光缆信息卡片
        closeFiberInfo() {
          this.selectedFiber = null;
          this.clearFiberHighlight();
        },
        
        // 清除光缆线
        clearFiberLines() {
          this.fiberLines.forEach(line => {
            this.map.remove(line);
          });
          this.fiberLines = [];
        },
        
        
        // 关闭所有卡片
        closeAllCards(keepRoomInfo = false) {
          console.log('清除所有信息卡片', keepRoomInfo ? '(保留机房信息)' : '');
          
          // 关闭所有卡片
          this.selectedNode = null;
          if (!keepRoomInfo) {
            this.selectedRoom = null;
            this.selectedBusinesses = [];
            this.roomDevices = [];
          }
          this.selectedDevice = null;
          this.selectedBoard = null;
          this.deviceBoards = [];
          this.boardPorts = [];
          
          // 清除光缆线高亮和选择（但保留菜单高亮）
          this.clearFiberHighlight();
          this.selectedFiber = null;
          
          // 清除所有标记的高亮状态（但保留菜单高亮）
          this.markers.forEach(marker => {
            const content = marker.getContent();
            if (content) {
              // 移除高亮CSS类
              content.classList.remove('highlighted-marker');
            }
          });
          
          // 清除地图上的信息窗口
          this.map.clearInfoWindow();
          
          // 注意：移除了restoreMenuHighlight()调用，避免无限循环
          // 菜单高亮应该在具体的高亮方法中处理，而不是在closeAllCards中
          
          console.log('所有信息卡片已清除');
        },
        
        // 恢复菜单高亮
        restoreMenuHighlight() {
          if (this.menuHighlightState.currentHighlightedMenu) {
            console.log('恢复菜单高亮:', this.menuHighlightState.currentHighlightedMenu.data.name);
            
            // 重新执行高亮操作，但不显示消息
            const data = this.menuHighlightState.currentHighlightedMenu.data;
            if (data.type === 'customer') {
              this.highlightCustomerAll(data);
            } else if (data.type === 'business') {
              this.highlightBusinessAll(data);
            } else if (data.type === 'fiber_group') {
              this.highlightFiberGroup(data);
            } else if (data.type === 'equipment_group') {
              this.highlightEquipmentGroup(data);
            } else if (data.type === 'fiber') {
              this.highlightSpecificFiber(data);
            } else if (data.type === 'equipment') {
              this.highlightEquipmentRoom(data);
            }
          }
        },
        
        // 选择机房
        async selectRoom(room, business = null) {
          console.log('选择机房:', room.name, '机房编码:', room.roomCode);
          this.selectedRoom = room;
          
          // 查找该机房关联的所有业务
          this.selectedBusinesses = await this.findRoomBusinesses(room);
          console.log('机房关联的业务:', this.selectedBusinesses.length, '个');
          
          // 清除设备相关选择
          this.selectedDevice = null;
          this.selectedBoard = null;
          this.deviceBoards = [];
          this.boardPorts = [];
          
          // 从后端获取设备数据
          try {
            console.log('正在获取机房设备数据...');
            this.roomDevices = await this.getRoomDevices(room);
            console.log('设备数据获取成功，共', this.roomDevices.length, '台设备');
            // ElMessage.success(`已选择机房: ${room.name}，共${this.roomDevices.length}台设备`);
          } catch (error) {
            console.error('获取设备数据失败:', error);
            this.roomDevices = [];
            //ElMessage.warning(`已选择机房: ${room.name}，但设备数据加载失败`);
          }
        },
        
        // 查找机房关联的所有业务（基于API数据）
        async findRoomBusinesses(room) {
          const businesses = [];
          
          console.log('查找机房关联业务:', room.name, '机房编码:', room.roomCode);
          
          try {
            // 使用新的API获取机房关联的业务信息
            const roomCode = room.roomCode || room.deviceNumber || room.id;
            const response = await MachineRoomAPI.getRoomBusinesses(roomCode);
            
            if (response && response.code === 200 && response.data && response.data.length > 0) {
              // 转换API返回的数据格式
              response.data.forEach(customerGroup => {
                if (customerGroup.businessList && customerGroup.businessList.length > 0) {
                  customerGroup.businessList.forEach(business => {
                    businesses.push({
                      id: business.businessCode,
                      name: business.businessName,
                      customerName: customerGroup.customerName,
                      customerCode: customerGroup.customerCode,
                      status: '在线',
                      updateTime: new Date().toLocaleString()
                    });
                  });
                }
              });
              
              console.log('从API获取到机房关联业务:', businesses.length, '个');
            } else {
              console.log('API未返回业务数据或数据为空');
            }
          } catch (error) {
            console.error('获取机房业务信息失败:', error);
            // 如果API调用失败，回退到基于菜单高亮状态的查找
            this.findRoomBusinessesByMenuHighlight(room, businesses);
          }
          
          return businesses;
        },
        
        // 基于菜单高亮状态的业务查找（备用方案）
        findRoomBusinessesByMenuHighlight(room, businesses) {
          console.log('使用菜单高亮状态查找业务');
          
          // 如果当前有菜单高亮状态，基于高亮状态查找业务
          if (this.menuHighlightState.isMenuHighlightActive && this.menuHighlightState.currentHighlightedMenu) {
            const highlightedMenu = this.menuHighlightState.currentHighlightedMenu;
            
            // 根据高亮菜单类型查找业务
            if (highlightedMenu.type === 'customer') {
              // 客户级别高亮，查找该客户下所有业务
              this.findBusinessesForCustomer(highlightedMenu.data, room, businesses);
            } else if (highlightedMenu.type === 'business') {
              // 业务级别高亮，检查该业务是否包含此机房
              this.findBusinessesForBusiness(highlightedMenu.data, room, businesses);
            } else if (highlightedMenu.type === 'equipment_group') {
              // 设备组级别高亮，查找该设备组所属的业务
              this.findBusinessesForEquipmentGroup(highlightedMenu.data, room, businesses);
            }
          } else {
            // 如果没有菜单高亮状态，遍历所有订单数据查找
            this.orderMenuData.forEach(customer => {
              this.findBusinessesForCustomer(customer, room, businesses);
            });
          }
          
          console.log('菜单高亮状态查找结果:', businesses.length, '个业务');
        },
        
        // 查找客户下的业务
        findBusinessesForCustomer(customer, room, businesses) {
          if (customer.children && customer.children.length > 0) {
            customer.children.forEach(business => {
              this.findBusinessesForBusiness(business, room, businesses, customer);
            });
          }
        },
        
        // 查找业务是否包含此机房
        findBusinessesForBusiness(business, room, businesses, customer = null) {
          const equipmentGroup = business.children.find(child => child.type === 'equipment_group');
          if (equipmentGroup && equipmentGroup.children) {
            const hasRoom = equipmentGroup.children.some(equipment => {
              return equipment.machineRoomName === room.name || 
                     equipment.machineRoomCode === room.roomCode ||
                     equipment.machineRoomCode === room.deviceNumber;
            });
            
            if (hasRoom) {
              businesses.push({
                id: business.id,
                name: business.name,
                customerName: customer ? customer.name : '未知客户',
                customerCode: customer ? customer.customerCode : '',
                status: '在线',
                updateTime: new Date().toLocaleString()
              });
            }
          }
        },
        
        // 查找设备组所属的业务
        findBusinessesForEquipmentGroup(equipmentGroup, room, businesses) {
          // 从设备组向上查找所属的业务和客户
          const business = this.findParentBusiness(equipmentGroup);
          if (business) {
            const customer = this.findParentCustomer(business);
            this.findBusinessesForBusiness(business, room, businesses, customer);
          }
        },
        
        // 查找设备组的父级业务
        findParentBusiness(equipmentGroup) {
          for (let customer of this.orderMenuData) {
            if (customer.children) {
              for (let business of customer.children) {
                if (business.children) {
                  const foundGroup = business.children.find(child => 
                    child.id === equipmentGroup.id && child.type === 'equipment_group'
                  );
                  if (foundGroup) {
                    return business;
                  }
                }
              }
            }
          }
          return null;
        },
        
        // 查找业务的父级客户
        findParentCustomer(business) {
          for (let customer of this.orderMenuData) {
            if (customer.children) {
              const foundBusiness = customer.children.find(child => 
                child.id === business.id && child.type === 'business'
              );
              if (foundBusiness) {
                return customer;
              }
            }
          }
          return null;
        },
        
        // 从树中选择设备
        async selectDeviceFromTree(device) {
          console.log('从树中选择设备:', device.name);
          
          // 查找设备所属的机房和业务线
          let parentRoom = null;
          let parentBusiness = null;
          
          for (let business of this.businessData) {
            for (let room of business.children) {
              for (let roomDevice of room.children) {
                if (roomDevice.id === device.id) {
                  parentRoom = room;
                  parentBusiness = business;
                  break;
                }
              }
              if (parentRoom) break;
            }
            if (parentRoom) break;
          }
          
          if (parentRoom && parentBusiness) {
            // 使用统一渲染函数确保红色高亮
            const roomCode = parentRoom.roomCode || parentRoom.id;
            if (roomCode) {
              this.renderByRoomCode(roomCode); // 使用统一渲染函数
            } else {
              console.warn('机房缺少编码:', parentRoom.name);
              //ElMessage.warning('机房缺少编码，无法渲染');
            }
            
            // 异步获取设备数据
            try {
              this.roomDevices = await this.getRoomDevices(parentRoom);
            } catch (error) {
              console.error('获取设备数据失败:', error);
              this.roomDevices = [];
            }
            
            // 选择设备
            this.selectedDevice = device;
            this.deviceBoards = this.getDeviceBoards(device.id);
            
            // 清除单板和端口选择
            this.selectedBoard = null;
            this.boardPorts = [];
            
            // ElMessage.success(`已选择设备: ${device.name}`);
          } else {
            ElMessage.error('无法找到设备所属的机房信息');
          }
        },
        
        // 从树中选择单板
        async selectBoardFromTree(board) {
          console.log('从树中选择单板:', board.name);
          
          // 查找单板所属的设备、机房和业务线
          let parentDevice = null;
          let parentRoom = null;
          let parentBusiness = null;
          
          for (let business of this.businessData) {
            for (let room of business.children) {
              for (let device of room.children) {
                for (let deviceBoard of device.children) {
                  if (deviceBoard.id === board.id) {
                    parentDevice = device;
                    parentRoom = room;
                    parentBusiness = business;
                    break;
                  }
                }
                if (parentDevice) break;
              }
              if (parentDevice) break;
            }
            if (parentDevice) break;
          }
          
          if (parentDevice && parentRoom && parentBusiness) {
            // 使用统一渲染函数确保红色高亮
            const roomCode = parentRoom.roomCode || parentRoom.id;
            if (roomCode) {
              this.renderByRoomCode(roomCode); // 使用统一渲染函数
            } else {
              console.warn('机房缺少编码:', parentRoom.name);
              //ElMessage.warning('机房缺少编码，无法渲染');
            }
            
            // 设置设备信息
            this.selectedDevice = parentDevice;
            this.deviceBoards = this.getDeviceBoards(parentDevice.id);
            
            // 选择单板
            this.selectedBoard = board;
            this.boardPorts = this.getBoardPorts(board.id);
            
            // ElMessage.success(`已选择单板: ${board.name}`);
          } else {
            ElMessage.error('无法找到单板所属的设备信息');
          }
        },
        
        // 从树中选择端口
        async selectPortFromTree(port) {
          console.log('从树中选择端口:', port.name);
          
          // 查找端口所属的单板、设备、机房和业务线
          let parentBoard = null;
          let parentDevice = null;
          let parentRoom = null;
          let parentBusiness = null;
          
          for (let business of this.businessData) {
            for (let room of business.children) {
              for (let device of room.children) {
                for (let board of device.children) {
                  for (let boardPort of board.children) {
                    if (boardPort.id === port.id) {
                      parentBoard = board;
                      parentDevice = device;
                      parentRoom = room;
                      parentBusiness = business;
                      break;
                    }
                  }
                  if (parentBoard) break;
                }
                if (parentBoard) break;
              }
              if (parentBoard) break;
            }
            if (parentBoard) break;
          }
          
          if (parentBoard && parentDevice && parentRoom && parentBusiness) {
            // 使用统一渲染函数确保红色高亮
            const roomCode = parentRoom.roomCode || parentRoom.id;
            if (roomCode) {
              this.renderByRoomCode(roomCode); // 使用统一渲染函数
            } else {
              console.warn('机房缺少编码:', parentRoom.name);
              //ElMessage.warning('机房缺少编码，无法渲染');
            }
            
            // 设置设备信息
            this.selectedDevice = parentDevice;
            this.deviceBoards = this.getDeviceBoards(parentDevice.id);
            
            // 选择单板
            this.selectedBoard = parentBoard;
            this.boardPorts = this.getBoardPorts(parentBoard.id);
            
            // ElMessage.success(`已选择端口: ${port.name}`);
          } else {
            ElMessage.error('无法找到端口所属的单板信息');
          }
        },
        
        // 关闭机房详情
        closeRoomDetails() {
          console.log('关闭机房详情');
          this.selectedRoom = null;
          this.selectedBusinesses = [];
          this.roomDevices = [];
          this.selectedDevice = null;
          this.selectedBoard = null;
          this.deviceBoards = [];
          this.boardPorts = [];
        },
        
        // 关闭设备详情
        closeDeviceDetails() {
          console.log('关闭设备详情');
          this.selectedDevice = null;
          this.selectedBoard = null;
          this.deviceBoards = [];
          this.boardPorts = [];
        },
        
        
        // 选择设备
        selectDevice(device) {
          console.log('选择设备:', device.name);
          // 不清除机房信息，只清除设备相关的下级信息
          this.selectedDevice = device;
          this.deviceBoards = this.getDeviceBoards(device.id);
          // 清除之前选择的单板和端口
          this.selectedBoard = null;
          this.boardPorts = [];
          console.log(`设备 ${device.name} 单板数据加载完成:`, this.deviceBoards.length);
          //ElMessage.success(`已选择设备: ${device.name}`);
        },
        
        // 选择单板
        selectBoard(board) {
          console.log('选择单板:', board.name);
          this.selectedBoard = board;
          this.boardPorts = this.getBoardPorts(board.id);
          console.log(`单板 ${board.name} 端口数据加载完成:`, this.boardPorts.length);
          //ElMessage.success(`已选择单板: ${board.name}`);
        },
        
        // 关闭单板详情
        closeBoardDetails() {
          console.log('关闭单板详情');
          this.selectedBoard = null;
          this.boardPorts = [];
        },
        
        // 关闭端口详情
        closePortDetails() {
          console.log('关闭端口详情');
          this.selectedBoard = null;
          this.boardPorts = [];
        },
        
        // 获取设备单板
        getDeviceBoards(deviceId) {
          return this.mockData.boards.filter(board => board.deviceId === deviceId);
        },
        
        // 获取单板端口
        getBoardPorts(boardId) {
          return this.mockData.ports.filter(port => port.boardId === boardId);
        },
        
        // 获取端口状态样式类
        getPortStatusClass(status) {
          const classMap = {
            'normal': 'port-normal',
            'warning': 'port-warning',
            'error': 'port-error',
            'unused': 'port-unused'
          };
          return classMap[status] || 'port-normal';
        },
        
        // 获取端口状态标签类型
        getPortStatusTagType(status) {
          const typeMap = {
            'normal': 'success',
            'warning': 'warning',
            'error': 'danger',
            'unused': 'info'
          };
          return typeMap[status] || 'info';
        },
        
        // 获取连接状态样式类
        getConnectionStatusClass(status) {
          const classMap = {
            'connected': 'connection-status-connected',
            'disconnected': 'connection-status-disconnected',
            'unknown': 'connection-status-unknown'
          };
          return classMap[status] || 'connection-status-unknown';
        },
        
        // 获取机房设备
        async getRoomDevices(room) {
          try {
            // 使用机房编码（deviceNumber）进行查询
            const roomCode = room.roomCode || room.id;
            console.log('调用设备API，机房编码:', roomCode, '机房名称:', room.name);
            
            const response = await EquipmentAPI.getEquipmentsByMachineRoomCode(roomCode);
            console.log('设备API响应:', response);
            
            if (response && response.code === 200 && response.data) {
              // 将设备数据转换为前端需要的格式
              const devices = response.data.map(equipment => ({
                id: equipment.id,
                name: equipment.deviceName || '未命名设备',
                brand: equipment.brandText || '未知品牌',
                model: equipment.deviceModel || '未知型号',
                status: '在线', // 默认状态，后续可以根据实际数据调整
                boardCount: 0, // 设备数据中没有单板数量，设为0
                portCount: 0,  // 设备数据中没有端口数量，设为0
                updateTime: new Date().toLocaleString(),
                // 添加更多设备信息
                deviceCode: equipment.deviceCode,
                deviceType: equipment.deviceType,
                managementIp: equipment.managementIp,
                rack: equipment.rack,
                uSpaceName: equipment.uSpaceName,
                business: equipment.business,
                features: equipment.features,
                remarks: equipment.remarks
              }));
              
              console.log('设备数据转换完成，共', devices.length, '台设备');
              return devices;
            } else {
              console.warn('设备API返回数据格式异常:', response);
              return [];
            }
          } catch (error) {
            console.error('获取机房设备数据失败:', error);
            // 如果API调用失败，返回空数组
            return [];
          }
        },
        
        getStatusTagType(status) {
          const typeMap = {
            '在线': 'success',
            '警告': 'warning',
            '离线': 'danger'
          };
          return typeMap[status] || 'info';
        },
        
        // 打开业务系统
        openBusinessSystem(business) {
          console.log('点击业务模块:', business.name);
          const url = 'https://101.231.37.4:65480/netstar/om/v1/index.html?noAutoLoadPIU&loadTopPIU=refr,U2020SolutionPIU,ua-info,webswingPIU,U2000MenuConfigPIU,TransExtMenuPiu,TransMenuAuthorityPiu&refr-flags=e&module=fd&nceapp=U2000&theme=gray';
          window.open(url, '_blank');
          ElMessage.success(`正在打开业务系统: ${business.name}`);
        },
        
        // 处理业务卡片悬停效果
        handleBusinessCardHover(event, isEntering) {
          const card = event.currentTarget;
          if (isEntering) {
            card.style.transform = 'translateY(-2px)';
            card.style.boxShadow = '0 4px 12px rgba(64, 158, 255, 0.3)';
            card.style.borderColor = '#409eff';
          } else {
            card.style.transform = 'translateY(0)';
            card.style.boxShadow = '';
            card.style.borderColor = '';
          }
        },
        
        // 打开设备系统
        openDeviceSystem(device) {
          console.log('点击设备:', device.name);
          const url = 'https://101.231.37.4:65480/eviewwebsite/index.html?noBroadCastBox&refr-flags=e&refr-flags=S&agencyId=1&noAutoLoadPIU&loadTopPIU=refr,U2020SolutionPIU,webswingPIU,U2000MenuConfigPIU#path=/topowebsite&topoClassId=3001&_t=1757560249';
          window.open(url, '_blank');
          ElMessage.success(`正在打开设备系统: ${device.name}`);
        },
        
        // 处理设备卡片悬停效果
        handleDeviceCardHover(event, isEntering) {
          const card = event.currentTarget;
          if (isEntering) {
            card.style.transform = 'translateY(-2px)';
            card.style.boxShadow = '0 4px 12px rgba(64, 158, 255, 0.3)';
            card.style.borderColor = '#409eff';
          } else {
            card.style.transform = 'translateY(0)';
            card.style.boxShadow = '';
            card.style.borderColor = '';
          }
        },
        
        
        precisePositionToRoom(room) {
          console.log('精准定位到机房:', room.name);
          
          // 精准定位到机房并居中
          this.map.setCenter(room.lnglat);
          this.map.setZoom(12);
          
          // 高亮该机房标记 - 使用统一的红色高亮样式
          this.markers.forEach(marker => {
            const extData = marker.getExtData();
            if (extData && extData.room && extData.room.id === room.id) {
              const content = marker.getContent();
              if (content) {
                // 使用统一的红色高亮样式
                content.classList.add('highlighted-marker');
              }
            }
          });
          
          //ElMessage.success(`已定位到机房: ${room.name}，地图已居中显示`);
        },
      }
    }).use(ElementPlus).mount('#app');
  </script>
</body>
</html>